98:I[903690,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1o28vbpztq9d-.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2l2pywawrqib6.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/22hg1dv7sryga.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0y0_nbp79fl4m.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0tk0ui75ekja5.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/35xb8ejlhfki4.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1658f4vha4vim.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1g6ffz-mb5ddb.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/06fsnp71_5bsd.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1hqlktk7lfas0.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/29ozk3d3m9hbo.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3zy-fggddgwot.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/00xcq1hxyca_i.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3ozpl0vnjpsf6.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0ri2k1_yh_pol.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3yhr6dplzvib8.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/29jt0k3ejw_02.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE"],"ExplicitChatIdProvider"] 99:I[838238,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1o28vbpztq9d-.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/2l2pywawrqib6.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/22hg1dv7sryga.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0y0_nbp79fl4m.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0tk0ui75ekja5.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/35xb8ejlhfki4.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1658f4vha4vim.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1g6ffz-mb5ddb.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/06fsnp71_5bsd.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/1hqlktk7lfas0.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/29ozk3d3m9hbo.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3zy-fggddgwot.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/00xcq1hxyca_i.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3ozpl0vnjpsf6.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/0ri2k1_yh_pol.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/3yhr6dplzvib8.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE","/chat-static/_next/static/chunks/29jt0k3ejw_02.js?dpl=dpl_BaoMKXAvJFWn2jp5HZ8HwUjpXNrE"],"SWRDataProvider"] 9b:[] 9c:[["b_jdv7dcIVXY2",null],["b_seR2KTI7oci",null],["b_WqFQTcGgqHZ",null],["b_9jjUYhs3ccz",null],["b_JehawTFHiKU",null],["b_8K87q8hZjR0",null],["b_HnAURNin5xo",null],["b_gtp2AWGuReT",null],["b_glGi7DI8d33",null],["b_A2PMg2oGSx0",null],["b_ePXdB0uGqin",null]] 9d:[["b_jdv7dcIVXY2",{"templateVersionId":null,"templateCanonId":null}],["b_seR2KTI7oci",{"templateVersionId":null,"templateCanonId":null}],["b_WqFQTcGgqHZ",{"templateVersionId":null,"templateCanonId":null}],["b_9jjUYhs3ccz",{"templateVersionId":null,"templateCanonId":null}],["b_JehawTFHiKU",{"templateVersionId":null,"templateCanonId":null}],["b_8K87q8hZjR0",{"templateVersionId":null,"templateCanonId":null}],["b_HnAURNin5xo",{"templateVersionId":null,"templateCanonId":null}],["b_gtp2AWGuReT",{"templateVersionId":null,"templateCanonId":null}],["b_glGi7DI8d33",{"templateVersionId":null,"templateCanonId":null}],["b_A2PMg2oGSx0",{"templateVersionId":null,"templateCanonId":null}],["b_ePXdB0uGqin",{"templateVersionId":null,"templateCanonId":null}]] 9e:[["b_8QoPo6hchzs","$D2026-01-23T02:00:37.379Z"],["b_Y53yzN9YclP","$D2026-01-23T02:00:43.754Z"],["b_FxjS09WAIdS","$D2026-01-23T02:00:56.997Z"],["b_BSjvIGDaS7J","$D2026-01-23T02:01:03.330Z"],["b_sEozxdnb6ps","$D2026-01-23T02:01:09.786Z"],["b_L2FoWsITnmr","$D2026-01-23T02:10:54.902Z"],["b_o6ljStBDV2e","$D2026-01-23T02:11:03.903Z"],["b_1RG8ZGZJDly","$D2026-01-23T02:11:09.735Z"],["b_9LlfurwQIZu","$D2026-01-23T02:11:15.508Z"],["b_WY4qxvgrgBL","$D2026-01-23T02:11:29.053Z"],["b_zf5CkmXxwYz","$D2026-01-23T02:11:34.831Z"],["b_SuRGQuLd0LR","$D2026-01-23T02:11:52.774Z"],["b_BBAl6dp6sfW","$D2026-01-23T02:12:09.074Z"],["b_ivHI1RSfVhD","$D2026-01-23T02:12:16.034Z"],["b_jxIsxtka7Jo","$D2026-01-23T02:12:19.566Z"],["b_LsOStX0AcV1","$D2026-01-23T03:18:14.162Z"],["b_KyvmkVN8TUu","$D2026-01-23T03:18:32.626Z"],["b_ftpqRbrVgjV","$D2026-01-23T03:18:42.664Z"],["b_Z3XLd3hzjBe","$D2026-01-23T03:18:46.514Z"],["b_piswg9Qg7de","$D2026-01-23T03:18:49.749Z"],["b_mlaRF8qGENE","$D2026-01-23T03:18:54.715Z"],["b_UPi20d54BX3","$D2026-01-23T03:30:19.588Z"],["b_EEJDpCl3nU8","$D2026-01-23T03:30:23.389Z"],["b_Mm1vR4YNCEM","$D2026-01-23T03:30:27.070Z"],["b_L2w2Pl5QW78","$D2026-01-23T03:30:41.501Z"],["b_77vllV804mm","$D2026-01-23T03:30:51.175Z"],["b_ecSjDLp6NKU","$D2026-01-23T03:31:07.809Z"],["b_pqZqHUHDy60","$D2026-01-23T05:17:31.730Z"],["b_Ggpu3Ui4UPB","$D2026-01-23T05:17:42.324Z"],["b_3hUHgPOhsM3","$D2026-01-23T05:17:47.640Z"],["b_EpCedBNmJTE","$D2026-01-23T05:18:09.126Z"],["b_ugc7IP7FQpO","$D2026-01-23T05:18:11.959Z"],["b_1sRwbP8wXai","$D2026-01-23T05:18:26.026Z"],["b_6KcGLdCBrv1","$D2026-02-16T05:37:02.687Z"],["b_rz2nN6d2d4r","$D2026-02-16T05:37:16.106Z"],["b_f9gH1EwCKT6","$D2026-02-16T05:37:20.509Z"],["b_wU38VlrdI89","$D2026-02-16T05:37:23.980Z"],["b_LSpGkbD8JNn","$D2026-02-16T05:37:31.941Z"],["b_5HX8i2JvREI","$D2026-02-16T05:42:43.867Z"],["b_XyAIyI2JTOp","$D2026-02-16T05:42:46.005Z"],["b_VkgP0MFVMPL","$D2026-02-16T05:43:19.242Z"],["b_fABr8wsR1cE","$D2026-02-16T05:43:23.637Z"],["b_KvfgVR1rCOA","$D2026-02-16T05:43:30.084Z"],["b_h9z9mKILGUf","$D2026-02-16T05:44:24.522Z"],["b_M4UjLf8DttM","$D2026-02-16T05:44:36.689Z"],["b_QWcageV5ZBF","$D2026-02-16T05:53:27.201Z"],["b_HJIVonkLjT4","$D2026-02-16T05:53:31.208Z"],["b_uhRQkg5vp6o","$D2026-02-16T05:53:57.808Z"],["b_80jUgaEOn2Z","$D2026-02-16T05:54:02.101Z"],["b_zdSzefgKTnw","$D2026-02-16T07:58:38.613Z"],["b_im3Voa4mUPG","$D2026-02-16T07:58:41.791Z"],["b_QOjOWhVtDTF","$D2026-02-16T07:58:57.177Z"],["b_OK06PYSSx4J","$D2026-02-16T07:59:07.988Z"],["b_4PScn7uoiNh","$D2026-02-16T07:59:22.082Z"],["b_jdv7dcIVXY2","$D2026-02-16T08:02:29.693Z"],["b_seR2KTI7oci","$D2026-02-18T08:10:37.687Z"],["b_WqFQTcGgqHZ","$D2026-02-18T08:10:42.745Z"],["b_9jjUYhs3ccz","$D2026-02-18T08:11:12.344Z"],["b_JehawTFHiKU","$D2026-02-18T08:11:19.524Z"],["b_8K87q8hZjR0","$D2026-02-18T08:11:24.195Z"],["b_HnAURNin5xo","$D2026-02-18T08:11:29.145Z"],["b_gtp2AWGuReT","$D2026-02-18T08:19:23.151Z"],["b_glGi7DI8d33","$D2026-02-18T08:19:57.669Z"],["b_A2PMg2oGSx0","$D2026-02-18T08:20:03.298Z"],["b_ePXdB0uGqin","$D2026-02-18T08:20:12.860Z"]] 9f:[["b_jdv7dcIVXY2",false],["b_seR2KTI7oci",false],["b_WqFQTcGgqHZ",false],["b_9jjUYhs3ccz",false],["b_JehawTFHiKU",false],["b_8K87q8hZjR0",false],["b_HnAURNin5xo",false],["b_gtp2AWGuReT",false],["b_glGi7DI8d33",false],["b_A2PMg2oGSx0",false],["b_ePXdB0uGqin",false]] a0:[["b_jdv7dcIVXY2","$undefined"],["b_seR2KTI7oci","$undefined"],["b_WqFQTcGgqHZ","$undefined"],["b_9jjUYhs3ccz","$undefined"],["b_JehawTFHiKU","$undefined"],["b_8K87q8hZjR0","$undefined"],["b_HnAURNin5xo","$undefined"],["b_gtp2AWGuReT","$undefined"],["b_glGi7DI8d33","$undefined"],["b_A2PMg2oGSx0","$undefined"],["b_ePXdB0uGqin",{"deploymentId":"dpl_7UKrXdfsNNq45bYZp98wuhhis7BT","showV0Button":true}]] a1:[["b_jdv7dcIVXY2",null],["b_seR2KTI7oci",null],["b_WqFQTcGgqHZ",null],["b_9jjUYhs3ccz",null],["b_JehawTFHiKU",null],["b_8K87q8hZjR0",null],["b_HnAURNin5xo",null],["b_gtp2AWGuReT",null],["b_glGi7DI8d33",null],["b_A2PMg2oGSx0",null],["b_ePXdB0uGqin",null]] a2:[["b_jdv7dcIVXY2",true],["b_seR2KTI7oci",true],["b_WqFQTcGgqHZ",true],["b_9jjUYhs3ccz",true],["b_JehawTFHiKU",true],["b_8K87q8hZjR0",true],["b_HnAURNin5xo",true],["b_gtp2AWGuReT",true],["b_glGi7DI8d33",true],["b_A2PMg2oGSx0",true],["b_ePXdB0uGqin",true]] a3:[["b_jdv7dcIVXY2",true],["b_seR2KTI7oci",true],["b_WqFQTcGgqHZ",true],["b_9jjUYhs3ccz",true],["b_JehawTFHiKU",true],["b_8K87q8hZjR0",true],["b_HnAURNin5xo",true],["b_gtp2AWGuReT",true],["b_glGi7DI8d33",true],["b_A2PMg2oGSx0",true],["b_ePXdB0uGqin",true]] a4:[] a5:T20f42,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" 'use client' import { useState } from 'react' import DocumentList from '@/components/document-list' import ViewDocumentModal from '@/components/modals/view-document-modal' import SendToEmployeeModal from '@/components/modals/send-to-employee-modal' export default function Home() { const [viewingDoc, setViewingDoc] = useState(null) const [showSendModal, setShowSendModal] = useState(false) return (

setShowSendModal(true)} /> {viewingDoc && ( setViewingDoc(null)} /> )} {showSendModal && ( setShowSendModal(false)} /> )}

) } [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.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/modals/view-document-modal.tsx" isMerged="true" 'use client' import { useState } from 'react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { X, Archive, Edit2, Eye, Save } from 'lucide-react' import DocumentTemplate from '../document-template' interface ViewDocumentModalProps { documentTitle: string onClose: () => void } export default function ViewDocumentModal({ documentTitle, onClose, }: ViewDocumentModalProps) { const [isEditMode, setIsEditMode] = useState(false) const [title, setTitle] = useState(documentTitle) const [content, setContent] = useState( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' ) const [editTitle, setEditTitle] = useState(title) const [editContent, setEditContent] = useState(content) const handleEdit = () => { setEditTitle(title) setEditContent(content) setIsEditMode(true) } const handleSaveEdit = () => { setTitle(editTitle) setContent(editContent) setIsEditMode(false) } const handleCancel = () => { setIsEditMode(false) } const handleArchive = () => { alert(`"${title}" has been archived`) onClose() } return (

{/* Modal Header */}

{title}

{/* Modal Content */}

{isEditMode ? ( // Edit Mode

Document Title setEditTitle(e.target.value)} placeholder="Enter document title" className="bg-background border-border text-foreground" />

Document Content

setEditContent(e.target.value)}
                  placeholder="Enter document content"
                  className="w-full h-64 p-4 rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                />
              </div>

<div className="bg-muted/20 rounded-lg border border-border p-6">
                <p className="text-sm font-medium text-foreground mb-4">Preview with Template</p>
                <DocumentTemplate title={editTitle} content={editContent} />
              </div>
            </div>
          ) : (
            // View Mode
            <div className="px-6 py-8">
              <DocumentTemplate title={title} content={content} />
            </div>
          )}
        </div>

{/* Modal Footer */}
        <div className="border-t border-border bg-muted/20 px-6 py-4 flex justify-end gap-3 flex-shrink-0">
          {isEditMode ? (
            <>
              <Button
                variant="outline"
                onClick={handleCancel}
                className="border-border text-foreground hover:bg-muted bg-transparent"
              >
                Cancel
              </Button>
              <Button
                onClick={handleSaveEdit}
                className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2"
              >
                <Save className="h-4 w-4" />
                Save Changes
              </Button>
            </>
          ) : (
            <>
              <Button
                variant="outline"
                onClick={onClose}
                className="border-border text-foreground hover:bg-muted bg-transparent"
              >
                Close
              </Button>
              <Button
                onClick={handleEdit}
                className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2"
              >
                <Edit2 className="h-4 w-4" />
                Edit Document
              </Button>
              <Button
                onClick={handleArchive}
                className="bg-destructive text-destructive-foreground hover:bg-destructive/90 flex items-center gap-2"
              >
                <Archive className="h-4 w-4" />
                Archive
              </Button>
            </>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-template.tsx" isMerged="true"
'use client'

import Image from 'next/image'

interface DocumentTemplateProps {
  title?: string
  content?: string
}

export default function DocumentTemplate({
  title = 'Document Title',
  content = 'Your document content goes here...',
}: DocumentTemplateProps) {
  return (
    <div className="min-h-screen bg-white text-foreground flex flex-col">
      {/* Header */}
      <div className="px-8 py-8 border-b-4 border-blue-600">
        <div className="flex items-start gap-6">
          {/* CLIMBS Logo */}
          <div className="flex-shrink-0">
            <div className="w-24 h-24 bg-blue-600 rounded-lg flex items-center justify-center border-4 border-yellow-400">
              <span className="text-3xl font-bold text-yellow-400">CLIMBS</span>
            </div>
          </div>

{/* Company Info */}
          <div className="flex-1">
            <div className="flex gap-4">
              {/* Circular Seal */}
              <div className="w-20 h-20 rounded-full border-4 border-blue-600 flex items-center justify-center bg-white flex-shrink-0">
                <div className="text-center">
                  <span className="text-xs font-bold text-blue-600">Member Protect</span>
                  <div className="text-xs text-blue-600 mt-1">Insurance</div>
                </div>
              </div>

{/* Company Name and Tagline */}
              <div>
                <h1 className="text-3xl font-bold text-blue-600">
                  CLIMBS LIFE AND GENERAL INSURANCE COOPERATIVE
                </h1>
                <p className="text-lg text-blue-500 mt-2">
                  A Climate Insurance: Insuring where you are!
                </p>
              </div>
            </div>
          </div>
        </div>

{/* Title Line */}
        <div className="mt-6 pt-6 border-t-4 border-yellow-400"></div>
      </div>

{/* Document Content */}
      <div className="flex-1 px-8 py-12">
        <div className="max-w-4xl">
          <h2 className="text-2xl font-bold text-foreground mb-6">{title}</h2>
          <div className="text-base leading-relaxed text-foreground whitespace-pre-wrap">
            {content}
          </div>
        </div>
      </div>

{/* Footer */}
      <div className="border-t-4 border-yellow-400 bg-gray-50 px-8 py-8">
        <div className="grid grid-cols-4 gap-6 mb-6">
          {/* Head Office */}
          <div className="text-sm">
            <h3 className="font-bold text-blue-600 mb-3">HEAD OFFICE</h3>
            <div className="space-y-2 text-gray-700">
              <p className="flex items-start gap-2">
                <span className="text-yellow-500 text-lg">📞</span>
                <span>(088) 881-0275</span>
              </p>
              <p className="flex items-start gap-2">
                <span className="text-yellow-500 text-lg">✉️</span>
                <span>customerservice@climbs.coop</span>
              </p>
              <p className="flex items-start gap-2">
                <span className="text-yellow-500 text-lg">📍</span>
                <span>CLIMBS Bldg., Zone 5, National Highway, Butua, 9000 Cagayan de Oro City, Philippines</span>
              </p>
            </div>
          </div>

{/* Quezon City Branch */}
          <div className="text-sm">
            <h3 className="font-bold text-blue-600 mb-3">QUEZON CITY BRANCH OFFICE</h3>
            <div className="space-y-2 text-gray-700">
              <p className="flex items-start gap-2">
                <span className="text-yellow-500 text-lg">📞</span>
                <span>(063) (02) 511 7078</span>
              </p>
              <p className="flex items-start gap-2">
                <span className="text-yellow-500 text-lg">✉️</span>
                <span>luzon_operations@climbs.coop</span>
              </p>
              <p className="flex items-start gap-2">
                <span className="text-yellow-500 text-lg">📍</span>
                <span>CLIMBS Bldg, 20 Stanford St., Barangay Socorro, Cubao, Quezon City, Philippines</span>
              </p>
            </div>
          </div>

{/* Cebu City Branch */}
          <div className="text-sm">
            <h3 className="font-bold text-blue-600 mb-3">CEBU CITY BRANCH OFFICE</h3>
            <div className="space-y-2 text-gray-700">
              <p className="flex items-start gap-2">
                <span className="text-yellow-500 text-lg">📞</span>
                <span>(063) (32) 255 2234</span>
              </p>
              <p className="flex items-start gap-2">
                <span className="text-yellow-500 text-lg">✉️</span>
                <span>visayas_asm@climbs.coop</span>
              </p>
              <p className="flex items-start gap-2">
                <span className="text-yellow-500 text-lg">📍</span>
                <span>5th Floor, Baseline Center, Juana Osmeña St., Capitol Site, Cebu City Philippines</span>
              </p>
            </div>
          </div>

{/* Davao City Branch & Follow Us */}
          <div>
            <div className="text-sm mb-6">
              <h3 className="font-bold text-blue-600 mb-3">DAVAO CITY BRANCH OFFICE</h3>
              <div className="space-y-2 text-gray-700">
                <p className="flex items-start gap-2">
                  <span className="text-yellow-500 text-lg">📞</span>
                  <span>(063) (82) 305 1398</span>
                </p>
                <p className="flex items-start gap-2">
                  <span className="text-yellow-500 text-lg">✉️</span>
                  <span>southmin_operations@climbs.coop</span>
                </p>
                <p className="flex items-start gap-2">
                  <span className="text-yellow-500 text-lg">📍</span>
                  <span>Sputnik Street, Barangay Poblacion, Davao City</span>
                </p>
              </div>
            </div>

{/* Follow Us */}
            <div className="text-sm">
              <h3 className="font-bold text-blue-600 mb-3">FOLLOW US</h3>
              <div className="space-y-2 text-gray-700">
                <p className="flex items-start gap-2">
                  <span className="text-yellow-500 text-lg">🌐</span>
                  <span>www.climbs.coop</span>
                </p>
                <p className="flex items-start gap-2">
                  <span className="text-yellow-500 text-lg">💼</span>
                  <span>linkedin.com/CLIMBSOfficial</span>
                </p>
                <p className="flex items-start gap-2">
                  <span className="text-yellow-500 text-lg">f</span>
                  <span>facebook.com/CLIMBSOfficial</span>
                </p>
              </div>
            </div>
          </div>
        </div>

{/* Bottom Border */}
        <div className="border-t-2 border-blue-600"></div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/modals/create-document-modal.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { X } from 'lucide-react'
import DocumentTemplate from '@/components/document-template'

interface CreateDocumentModalProps {
  onClose: () => void
  onCreate?: (doc: { title: string; content: string }) => void
}

export default function CreateDocumentModal({
  onClose,
  onCreate,
}: CreateDocumentModalProps) {
  const [title, setTitle] = useState('Document Title')
  const [content, setContent] = useState(
    'Your document content goes here...\n\nYou can write any text or instructions here.'
  )
  const [activeTab, setActiveTab] = useState<'edit' | 'preview'>('edit')

const handleCreate = () => {
    if (title.trim() && content.trim()) {
      onCreate?.({ title, content })
      alert(`Document "${title}" created successfully!`)
      onClose()
    } else {
      alert('Please fill in both title and content')
    }
  }

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-card rounded-lg shadow-lg w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col">
        {/* Modal Header */}
        <div className="border-b border-border bg-card px-6 py-4 flex items-center justify-between flex-shrink-0">
          <h2 className="text-2xl font-semibold text-foreground">
            Create New Document
          </h2>
          <button
            onClick={onClose}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
            <X className="h-6 w-6" />
          </button>
        </div>

{/* Tabs */}
        <div className="border-b border-border bg-muted/20 px-6 flex-shrink-0">
          <div className="flex gap-4">
            <button
              onClick={() => setActiveTab('edit')}
              className={`px-4 py-3 font-medium border-b-2 transition-colors ${
                activeTab === 'edit'
                  ? 'border-primary text-primary'
                  : 'border-transparent text-muted-foreground hover:text-foreground'
              }`}
            >
              Edit
            </button>
            <button
              onClick={() => setActiveTab('preview')}
              className={`px-4 py-3 font-medium border-b-2 transition-colors ${
                activeTab === 'preview'
                  ? 'border-primary text-primary'
                  : 'border-transparent text-muted-foreground hover:text-foreground'
              }`}
            >
              Preview
            </button>
          </div>
        </div>

{/* Content Area */}
        <div className="flex-1 overflow-y-auto">
          {activeTab === 'edit' ? (
            <div className="p-6 space-y-6">
              {/* Title Input */}
              <div>
                <label className="block text-sm font-medium text-foreground mb-2">
                  Document Title
                </label>
                <Input
                  type="text"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="Enter document title"
                  className="border-border bg-background text-foreground"
                />
              </div>

{/* Content Input */}
              <div>
                <label className="block text-sm font-medium text-foreground mb-2">
                  Document Content
                </label>
                <textarea
                  value={content}
                  onChange={(e) => setContent(e.target.value)}
                  placeholder="Enter document content"
                  className="w-full h-80 p-4 rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
                />
              </div>

<p className="text-xs text-muted-foreground">
                The document will be formatted with CLIMBS header and footer automatically.
              </p>
            </div>
          ) : (
            <div className="p-6 bg-muted/30 min-h-full overflow-auto flex justify-center">
              <div className="w-full max-w-4xl">
                <DocumentTemplate title={title} content={content} />
              </div>
            </div>
          )}
        </div>

{/* Modal Footer */}
        <div className="border-t border-border bg-muted/20 px-6 py-4 flex justify-end gap-3 flex-shrink-0">
          <Button
            variant="outline"
            onClick={onClose}
            className="border-border text-foreground hover:bg-muted bg-transparent"
          >
            Cancel
          </Button>
          <Button
            onClick={handleCreate}
            className="bg-primary text-primary-foreground hover:bg-primary/90"
          >
            Create Document
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/modals/send-confirmation-modal.tsx" isMerged="true"
'use client'

import { Button } from '@/components/ui/button'
import { X, CheckCircle2 } from 'lucide-react'

interface SendConfirmationModalProps {
  selectedEmployees: Array<{
    id: string
    name: string
    email: string
    department: string
    unit: string
  }>
  onConfirm: () => void
  onCancel: () => void
  isLoading?: boolean
}

export default function SendConfirmationModal({
  selectedEmployees,
  onConfirm,
  onCancel,
  isLoading = false,
}: SendConfirmationModalProps) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-card rounded-lg shadow-lg max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
        {/* Modal Header */}
        <div className="border-b border-border bg-card px-6 py-4 flex items-center justify-between flex-shrink-0">
          <div className="flex items-center gap-3">
            <CheckCircle2 className="h-6 w-6 text-primary" />
            <h2 className="text-2xl font-semibold text-foreground">Confirm Send</h2>
          </div>
          <button
            onClick={onCancel}
            disabled={isLoading}
            className="text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
          >
            <X className="h-6 w-6" />
          </button>
        </div>

{/* Modal Content */}
        <div className="flex-1 overflow-y-auto px-6 py-8">
          <div className="space-y-6">
            {/* Summary */}
            <div className="bg-primary/5 border border-primary/20 rounded-lg p-4">
              <p className="text-sm font-medium text-foreground">
                You are about to send the selected document(s) to{' '}
                <span className="font-semibold text-primary">{selectedEmployees.length}</span>{' '}
                employee{selectedEmployees.length !== 1 ? 's' : ''}. Please review the list below.
              </p>
            </div>

{/* Employee List */}
            <div className="space-y-3">
              <h3 className="text-sm font-semibold text-foreground">Recipients</h3>
              <div className="space-y-2 max-h-96 overflow-y-auto">
                {selectedEmployees.map((employee) => (
                  <div
                    key={employee.id}
                    className="flex items-start gap-3 p-3 rounded-lg border border-border bg-muted/30"
                  >
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-foreground truncate">
                        {employee.name}
                      </p>
                      <div className="flex flex-wrap gap-2 mt-1">
                        <span className="text-xs bg-background px-2 py-1 rounded border border-border text-muted-foreground">
                          {employee.email}
                        </span>
                        <span className="text-xs bg-background px-2 py-1 rounded border border-border text-muted-foreground">
                          {employee.department}
                        </span>
                        <span className="text-xs bg-background px-2 py-1 rounded border border-border text-muted-foreground">
                          {employee.unit}
                        </span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

{/* Warning */}
            <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
              <p className="text-sm text-amber-900">
                Once sent, the document(s) will be delivered to all selected employees. This action cannot be undone.
              </p>
            </div>
          </div>
        </div>

{/* Modal Footer */}
        <div className="border-t border-border bg-muted/20 px-6 py-4 flex justify-end gap-3 flex-shrink-0">
          <Button
            variant="outline"
            onClick={onCancel}
            disabled={isLoading}
            className="border-border text-foreground hover:bg-muted bg-transparent"
          >
            Cancel
          </Button>
          <Button
            onClick={onConfirm}
            disabled={isLoading}
            className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isLoading ? 'Sending...' : 'Confirm & Send'}
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/employee/page.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import EmployeeDocumentInbox from '@/components/employee/employee-document-inbox'
import EmployeeSentDocuments from '@/components/employee/employee-sent-documents'
import { Mail, Send } from 'lucide-react'

export default function EmployeePage() {
  const [activeTab, setActiveTab] = useState<'inbox' | 'sent'>('inbox')

return (
    <main className="min-h-screen bg-background">
      <div className="max-w-7xl mx-auto px-4 py-8">
        {/* Navigation Tabs */}
        <div className="flex items-center gap-2 mb-8 border-b border-border">
          <Button
            onClick={() => setActiveTab('inbox')}
            variant={activeTab === 'inbox' ? 'default' : 'ghost'}
            className={`flex items-center gap-2 px-4 py-3 rounded-t-lg border-b-2 transition-colors ${
              activeTab === 'inbox'
                ? 'border-primary bg-transparent text-foreground'
                : 'border-transparent text-muted-foreground hover:text-foreground'
            }`}
          >
            <Mail className="h-5 w-5" />
            Inbox
          </Button>
          <Button
            onClick={() => setActiveTab('sent')}
            variant={activeTab === 'sent' ? 'default' : 'ghost'}
            className={`flex items-center gap-2 px-4 py-3 rounded-t-lg border-b-2 transition-colors ${
              activeTab === 'sent'
                ? 'border-primary bg-transparent text-foreground'
                : 'border-transparent text-muted-foreground hover:text-foreground'
            }`}
          >
            <Send className="h-5 w-5" />
            Sent
          </Button>
        </div>

{/* Tab Content */}
        <div>
          {activeTab === 'inbox' && <EmployeeDocumentInbox />}
          {activeTab === 'sent' && <EmployeeSentDocuments />}
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/employee/employee-document-inbox.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import EmployeeDocumentCard from './employee-document-card'
import EmployeeViewDocumentModal from './modals/employee-view-document-modal'
import { Search, CheckCircle2, Clock } from 'lucide-react'

interface ReceivedDocument {
  id: string
  title: string
  sentBy: string
  sentDate: string
  accepted: boolean
  content?: string
}

const SAMPLE_RECEIVED_DOCUMENTS: ReceivedDocument[] = [
  {
    id: '1',
    title: 'Employee Document Acknowledgement Form',
    sentBy: 'HR Department',
    sentDate: '2024-01-20',
    accepted: false,
    content: 'This form acknowledges that you have received and understood the company policies.',
  },
  {
    id: '2',
    title: 'Pledge of Confidentiality',
    sentBy: 'HR Department',
    sentDate: '2024-01-18',
    accepted: true,
    content: 'This pledge outlines the confidentiality obligations of all employees.',
  },
  {
    id: '3',
    title: 'Employee Non-Disclosure Agreement',
    sentBy: 'Legal Department',
    sentDate: '2024-01-15',
    accepted: false,
    content: 'This agreement protects the intellectual property and trade secrets of the company.',
  },
]

export default function EmployeeDocumentInbox() {
  const [searchQuery, setSearchQuery] = useState('')
  const [documents, setDocuments] = useState<ReceivedDocument[]>(SAMPLE_RECEIVED_DOCUMENTS)
  const [selectedDocument, setSelectedDocument] = useState<ReceivedDocument | null>(null)
  const [showViewModal, setShowViewModal] = useState(false)
  const [filterStatus, setFilterStatus] = useState<'all' | 'pending' | 'accepted'>('all')

const filteredDocuments = documents.filter((doc) => {
    const matchesSearch = doc.title.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesFilter =
      filterStatus === 'all' ||
      (filterStatus === 'pending' && !doc.accepted) ||
      (filterStatus === 'accepted' && doc.accepted)
    return matchesSearch && matchesFilter
  })

const handleViewDocument = (document: ReceivedDocument) => {
    setSelectedDocument(document)
    setShowViewModal(true)
  }

const handleCloseModal = () => {
    setShowViewModal(false)
    setSelectedDocument(null)
  }

const handleAcceptDocument = (docId: string) => {
    setDocuments((prevDocs) =>
      prevDocs.map((doc) => (doc.id === docId ? { ...doc, accepted: true } : doc))
    )
    handleCloseModal()
  }

const pendingCount = documents.filter((doc) => !doc.accepted).length
  const acceptedCount = documents.filter((doc) => doc.accepted).length

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-background to-muted/20">
      {/* Header */}
      <div className="sticky top-0 z-40 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="max-w-6xl mx-auto px-6 py-6">
          <div className="space-y-6">
            <div>
              <h1 className="text-4xl font-bold text-foreground">Your Documents</h1>
              <p className="text-muted-foreground mt-2">
                Review and accept documents sent by your HR department
              </p>
            </div>

{/* Search and Filters */}
            <div className="flex flex-col sm:flex-row gap-4">
              <div className="flex-1 flex items-center gap-2 rounded-lg border border-border bg-muted/40 px-4 py-3">
                <Search className="h-5 w-5 text-muted-foreground" />
                <Input
                  type="text"
                  placeholder="Search documents..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="border-0 bg-transparent p-0 text-foreground placeholder:text-muted-foreground focus-visible:ring-0"
                />
              </div>

{/* Status Tabs */}
              <div className="flex gap-2">
                <Button
                  onClick={() => setFilterStatus('all')}
                  variant={filterStatus === 'all' ? 'default' : 'outline'}
                  className={`${
                    filterStatus === 'all'
                      ? 'bg-primary text-primary-foreground'
                      : 'border-border text-foreground hover:bg-muted bg-transparent'
                  }`}
                >
                  All ({documents.length})
                </Button>
                <Button
                  onClick={() => setFilterStatus('pending')}
                  variant={filterStatus === 'pending' ? 'default' : 'outline'}
                  className={`${
                    filterStatus === 'pending'
                      ? 'bg-amber-600 text-white'
                      : 'border-border text-foreground hover:bg-muted bg-transparent'
                  }`}
                >
                  <Clock className="h-4 w-4 mr-2" />
                  Pending ({pendingCount})
                </Button>
                <Button
                  onClick={() => setFilterStatus('accepted')}
                  variant={filterStatus === 'accepted' ? 'default' : 'outline'}
                  className={`${
                    filterStatus === 'accepted'
                      ? 'bg-emerald-600 text-white'
                      : 'border-border text-foreground hover:bg-muted bg-transparent'
                  }`}
                >
                  <CheckCircle2 className="h-4 w-4 mr-2" />
                  Accepted ({acceptedCount})
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Documents Grid */}
      <div className="max-w-6xl mx-auto px-6 py-8">
        {filteredDocuments.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredDocuments.map((document) => (
              <EmployeeDocumentCard
                key={document.id}
                document={document}
                onView={handleViewDocument}
              />
            ))}
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-12 text-center">
            <div className="text-muted-foreground space-y-2">
              <p className="text-lg font-medium">No documents found</p>
              <p className="text-sm">
                {searchQuery ? 'Try adjusting your search' : 'Check back later for new documents'}
              </p>
            </div>
          </div>
        )}
      </div>

{/* View Document Modal */}
      {showViewModal && selectedDocument && (
        <EmployeeViewDocumentModal
          document={selectedDocument}
          onClose={handleCloseModal}
          onAccept={handleAcceptDocument}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/employee/employee-document-card.tsx" isMerged="true"
'use client'

import { Button } from '@/components/ui/button'
import { CheckCircle2, Clock, FileText } from 'lucide-react'

interface ReceivedDocument {
  id: string
  title: string
  sentBy: string
  sentDate: string
  accepted: boolean
}

interface EmployeeDocumentCardProps {
  document: ReceivedDocument
  onView: (document: ReceivedDocument) => void
}

export default function EmployeeDocumentCard({
  document,
  onView,
}: EmployeeDocumentCardProps) {
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    }).format(date)
  }

return (
    <div
      className={`rounded-lg border transition-all duration-200 hover:shadow-lg ${
        document.accepted
          ? 'border-emerald-200 bg-emerald-50 hover:border-emerald-300'
          : 'border-amber-200 bg-amber-50 hover:border-amber-300'
      }`}
    >
      <div className="p-6 space-y-4">
        {/* Document Icon and Title */}
        <div className="flex items-start gap-3">
          <div
            className={`p-2 rounded-lg ${
              document.accepted ? 'bg-emerald-100' : 'bg-amber-100'
            }`}
          >
            <FileText
              className={`h-5 w-5 ${
                document.accepted ? 'text-emerald-600' : 'text-amber-600'
              }`}
            />
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="font-semibold text-foreground text-balance line-clamp-2">
              {document.title}
            </h3>
            <p className="text-sm text-muted-foreground mt-1">{document.sentBy}</p>
          </div>
        </div>

{/* Status Badge */}
        <div className="flex items-center gap-2">
          {document.accepted ? (
            <div className="flex items-center gap-1 text-emerald-700 text-sm font-medium">
              <CheckCircle2 className="h-4 w-4" />
              Accepted
            </div>
          ) : (
            <div className="flex items-center gap-1 text-amber-700 text-sm font-medium">
              <Clock className="h-4 w-4" />
              Pending
            </div>
          )}
        </div>

{/* Sent Date */}
        <p className="text-xs text-muted-foreground">Sent on {formatDate(document.sentDate)}</p>

{/* Action Button */}
        <Button
          onClick={() => onView(document)}
          className={`w-full ${
            document.accepted
              ? 'bg-emerald-600 hover:bg-emerald-700 text-white'
              : 'bg-amber-600 hover:bg-amber-700 text-white'
          }`}
        >
          {document.accepted ? 'View Document' : 'Review & Accept'}
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/employee/modals/terms-and-conditions-modal.tsx" isMerged="true"
'use client'

import React from "react"

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { X, AlertCircle } from 'lucide-react'
import DocumentTemplate from '@/components/document-template'

interface TermsAndConditionsModalProps {
  documentTitle: string
  documentContent: string
  onAccept: () => void
  onReject: () => void
}

export default function TermsAndConditionsModal({
  documentTitle,
  documentContent,
  onAccept,
  onReject,
}: TermsAndConditionsModalProps) {
  const [hasScrolled, setHasScrolled] = useState(false)
  const [hasAgreed, setHasAgreed] = useState(false)
  const [showFullContent, setShowFullContent] = useState(false)

const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
    const element = e.currentTarget
    if (element.scrollHeight - element.scrollTop <= element.clientHeight + 10) {
      setHasScrolled(true)
    }
  }

const termsContent = `TERMS AND CONDITIONS

This document outlines the terms and conditions that govern your employment and relationship with the organization. By accepting these terms, you acknowledge that:

1. You have read and understood all the provisions in this agreement
2. You agree to comply with all company policies and procedures
3. You understand your roles, responsibilities, and obligations
4. You agree to maintain confidentiality of proprietary information
5. You understand the conduct expectations and professional standards

This agreement is binding and enforceable under applicable laws. Please ensure you fully understand all terms before acceptance.`

const tcSections = [
    {
      title: 'Employment Terms',
      content:
        'You agree to the terms of employment as outlined in your offer letter and employment contract. This includes your role, responsibilities, reporting structure, and compensation.',
    },
    {
      title: 'Confidentiality',
      content:
        'You agree to maintain strict confidentiality of all proprietary information, trade secrets, and sensitive company data. This obligation continues even after termination of employment.',
    },
    {
      title: 'Code of Conduct',
      content:
        'You agree to adhere to the company code of conduct and professional standards at all times. This includes respectful workplace behavior and compliance with all policies.',
    },
    {
      title: 'Data Privacy',
      content:
        'You acknowledge that the company processes personal data in accordance with applicable privacy laws. You have the right to request access to your data at any time.',
    },
  ]

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-card rounded-lg shadow-lg max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
        {/* Modal Header */}
        <div className="sticky top-0 border-b border-border bg-card px-6 py-4 flex items-center justify-between flex-shrink-0">
          <div>
            <h2 className="text-2xl font-semibold text-foreground">Terms & Conditions</h2>
            <p className="text-sm text-muted-foreground mt-1">{documentTitle}</p>
          </div>
          <button
            onClick={onReject}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
            <X className="h-6 w-6" />
          </button>
        </div>

{/* Content */}
        <div className="flex-1 overflow-hidden flex flex-col">
          {!showFullContent ? (
            // T&C Summary View
            <div className="overflow-y-auto flex-1" onScroll={handleScroll}>
              <div className="px-6 py-8 space-y-6">
                {/* Alert */}
                <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 flex gap-3">
                  <AlertCircle className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <p className="font-medium text-amber-900">Please review carefully</p>
                    <p className="text-sm text-amber-800 mt-1">
                      By accepting these terms, you agree to all conditions outlined below. Make sure you scroll through
                      all content before accepting.
                    </p>
                  </div>
                </div>

{/* T&C Sections */}
                <div className="space-y-6">
                  {tcSections.map((section, index) => (
                    <div key={index} className="space-y-2">
                      <h3 className="font-semibold text-foreground flex items-center gap-2">
                        <span className="flex items-center justify-center h-6 w-6 rounded-full bg-primary/20 text-primary text-sm font-semibold">
                          {index + 1}
                        </span>
                        {section.title}
                      </h3>
                      <p className="text-muted-foreground text-sm leading-relaxed">{section.content}</p>
                    </div>
                  ))}
                </div>

{/* Scroll Indicator */}
                {!hasScrolled && (
                  <div className="text-center text-muted-foreground text-sm">
                    <p>↓ Please scroll down to review all terms ↓</p>
                  </div>
                )}
              </div>
            </div>
          ) : (
            // Full Document View
            <div className="overflow-y-auto flex-1 px-6 py-8">
              <DocumentTemplate title={documentTitle} content={documentContent} />
            </div>
          )}
        </div>

{/* Footer */}
        <div className="border-t border-border bg-muted/20 px-6 py-4 space-y-4 flex-shrink-0">
          {/* Agreement Checkbox */}
          <div className="flex items-start gap-3 rounded-lg border border-border p-4 bg-background">
            <Checkbox
              id="agree-terms"
              checked={hasAgreed}
              onChange={(e) => setHasAgreed((e.target as HTMLInputElement).checked)}
              className="mt-1"
            />
            <label htmlFor="agree-terms" className="text-sm text-foreground cursor-pointer">
              I have read and agree to the Terms and Conditions above. I understand that this is a binding
              agreement.
            </label>
          </div>

{/* View Toggle */}
          <div className="text-center">
            <Button
              onClick={() => setShowFullContent(!showFullContent)}
              variant="outline"
              className="border-border text-foreground hover:bg-muted bg-transparent text-sm"
            >
              {showFullContent ? 'Back to Summary' : 'View Full Document'}
            </Button>
          </div>

{/* Action Buttons */}
          <div className="flex gap-3 justify-end pt-2">
            <Button
              onClick={onReject}
              variant="outline"
              className="border-border text-foreground hover:bg-muted bg-transparent"
            >
              Decline
            </Button>
            <Button
              onClick={onAccept}
              disabled={!hasAgreed}
              className="bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Accept & Continue
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/employee/modals/employee-view-document-modal.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { X, CheckCircle2, ArrowLeft } from 'lucide-react'
import DocumentTemplate from '@/components/document-template'
import TermsAndConditionsModal from './terms-and-conditions-modal'

interface ReceivedDocument {
  id: string
  title: string
  sentBy: string
  sentDate: string
  accepted: boolean
  content?: string
}

interface EmployeeViewDocumentModalProps {
  document: ReceivedDocument
  onClose: () => void
  onAccept: (docId: string) => void
}

export default function EmployeeViewDocumentModal({
  document,
  onClose,
  onAccept,
}: EmployeeViewDocumentModalProps) {
  const [showTermsModal, setShowTermsModal] = useState(!document.accepted)

const handleAcceptTerms = () => {
    setShowTermsModal(false)
    onAccept(document.id)
  }

const handleRejectTerms = () => {
    onClose()
  }

return (
    <>
      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
        <div className="bg-card rounded-lg shadow-lg max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
          {/* Modal Header */}
          <div className="sticky top-0 border-b border-border bg-card px-6 py-4 flex items-center justify-between flex-shrink-0">
            <div>
              <h2 className="text-2xl font-semibold text-foreground">{document.title}</h2>
              <p className="text-sm text-muted-foreground mt-1">Sent by {document.sentBy}</p>
            </div>
            <button
              onClick={onClose}
              className="text-muted-foreground hover:text-foreground transition-colors"
            >
              <X className="h-6 w-6" />
            </button>
          </div>

{/* Status Badge */}
          {document.accepted && (
            <div className="bg-emerald-50 border-b border-emerald-200 px-6 py-3 flex items-center gap-2 text-emerald-700">
              <CheckCircle2 className="h-5 w-5" />
              <span className="font-medium">You have accepted this document</span>
            </div>
          )}

{/* Document Content */}
          <div className="flex-1 overflow-y-auto px-6 py-8">
            <DocumentTemplate title={document.title} content={document.content || ''} />
          </div>

{/* Footer */}
          <div className="border-t border-border bg-muted/20 px-6 py-4 flex justify-end gap-3 flex-shrink-0">
            <Button
              onClick={onClose}
              variant="outline"
              className="border-border text-foreground hover:bg-muted bg-transparent"
            >
              Close
            </Button>
            {!document.accepted && (
              <Button
                onClick={() => setShowTermsModal(true)}
                className="bg-emerald-600 text-white hover:bg-emerald-700"
              >
                Accept Document
              </Button>
            )}
          </div>
        </div>
      </div>

{/* Terms and Conditions Modal */}
      {showTermsModal && (
        <TermsAndConditionsModal
          documentTitle={document.title}
          documentContent={document.content || ''}
          onAccept={handleAcceptTerms}
          onReject={handleRejectTerms}
        />
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/modals/notification-method-modal.tsx" isMerged="true"
'use client'

import { Button } from '@/components/ui/button'
import { X, Mail, MessageSquare, Radio } from 'lucide-react'

interface NotificationMethodModalProps {
  onClose: () => void
  onSelectMethod: (method: 'sms' | 'email' | 'both') => void
}

export default function NotificationMethodModal({
  onClose,
  onSelectMethod,
}: NotificationMethodModalProps) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-card rounded-lg shadow-lg max-w-md w-full">
        {/* Modal Header */}
        <div className="border-b border-border bg-card px-6 py-4 flex items-center justify-between">
          <h2 className="text-xl font-semibold text-foreground">Choose Notification Method</h2>
          <button
            onClick={onClose}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
            <X className="h-6 w-6" />
          </button>
        </div>

{/* Modal Content */}
        <div className="px-6 py-8 space-y-4">
          <p className="text-sm text-muted-foreground mb-6">
            Select how you want to notify the selected employees about the document(s)
          </p>

{/* SMS Option */}
          <button
            onClick={() => onSelectMethod('sms')}
            className="w-full p-4 rounded-lg border-2 border-border hover:border-primary hover:bg-muted transition-all text-left group"
          >
            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 p-3 rounded-lg bg-muted group-hover:bg-primary/10 transition-colors">
                <MessageSquare className="h-6 w-6 text-foreground group-hover:text-primary transition-colors" />
              </div>
              <div className="flex-1">
                <p className="font-semibold text-foreground">Send via SMS</p>
                <p className="text-sm text-muted-foreground">
                  Notify employees through text message
                </p>
              </div>
              <Radio className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors flex-shrink-0 mt-1" />
            </div>
          </button>

{/* Email Option */}
          <button
            onClick={() => onSelectMethod('email')}
            className="w-full p-4 rounded-lg border-2 border-border hover:border-primary hover:bg-muted transition-all text-left group"
          >
            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 p-3 rounded-lg bg-muted group-hover:bg-primary/10 transition-colors">
                <Mail className="h-6 w-6 text-foreground group-hover:text-primary transition-colors" />
              </div>
              <div className="flex-1">
                <p className="font-semibold text-foreground">Send via Email</p>
                <p className="text-sm text-muted-foreground">
                  Notify employees through email message
                </p>
              </div>
              <Radio className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors flex-shrink-0 mt-1" />
            </div>
          </button>

{/* Both Option */}
          <button
            onClick={() => onSelectMethod('both')}
            className="w-full p-4 rounded-lg border-2 border-border hover:border-primary hover:bg-muted transition-all text-left group"
          >
            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 p-3 rounded-lg bg-muted group-hover:bg-primary/10 transition-colors">
                <div className="flex gap-2">
                  <MessageSquare className="h-4 w-4 text-foreground group-hover:text-primary transition-colors" />
                  <Mail className="h-4 w-4 text-foreground group-hover:text-primary transition-colors" />
                </div>
              </div>
              <div className="flex-1">
                <p className="font-semibold text-foreground">Send via Both</p>
                <p className="text-sm text-muted-foreground">
                  Notify employees through SMS and email
                </p>
              </div>
              <Radio className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors flex-shrink-0 mt-1" />
            </div>
          </button>
        </div>

{/* Modal Footer */}
        <div className="border-t border-border bg-muted/20 px-6 py-4 flex justify-end gap-3">
          <Button
            variant="outline"
            onClick={onClose}
            className="border-border text-foreground hover:bg-muted bg-transparent"
          >
            Cancel
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/modals/notification-template-modal.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { X, Mail, MessageSquare, Edit3 } from 'lucide-react'

interface NotificationTemplateModalProps {
  method: 'sms' | 'email' | 'both'
  onClose: () => void
  onConfirm: (templates: { sms?: string; email?: string }) => void
}

const SMS_TEMPLATES = [
  {
    id: 'sms-1',
    name: 'Standard Notification',
    content: 'Hello! You have received important documents from HR that require your review and acceptance. Please log in to the employee portal to view and accept them.',
  },
  {
    id: 'sms-2',
    name: 'Urgent',
    content: 'URGENT: You have received critical HR documents that require immediate review and acceptance. Please access the employee portal right away.',
  },
  {
    id: 'sms-3',
    name: 'Friendly Reminder',
    content: 'Hi! Just a friendly reminder that you have new documents waiting for you in the HR portal. Take a moment to review and accept them when you can.',
  },
]

const EMAIL_TEMPLATES = [
  {
    id: 'email-1',
    name: 'Standard Notification',
    subject: 'New HR Documents Require Your Attention',
    content: `Dear Employee,

You have received important documents from our Human Resources department that require your review and acceptance.

Please log in to the employee portal using your credentials and navigate to the Documents section to view the documents.

Instructions:
1. Review all documents carefully
2. Accept the terms and conditions
3. Save your confirmation

If you have any questions or concerns, please contact the HR department.

Best regards,
Human Resources Team`,
  },
  {
    id: 'email-2',
    name: 'Formal Notice',
    subject: 'Action Required: Important HR Documents Pending',
    content: `Dear Employee,

This is to inform you that critical HR documentation has been assigned to you and requires your immediate attention.

As part of our compliance requirements, you must:
- Review all attached documents
- Accept the terms and conditions as presented
- Confirm receipt and acceptance within the specified timeframe

Please access the employee portal to complete this action.

For support, contact HR at hrdesk@company.com

Sincerely,
Human Resources Department`,
  },
  {
    id: 'email-3',
    name: 'Welcome Onboarding',
    subject: 'Welcome! Please Review Your Onboarding Documents',
    content: `Dear New Team Member,

Welcome to our company! We're excited to have you on board.

To complete your onboarding process, please review and accept the following documents in the employee portal:

- Employee Handbook
- Terms and Conditions
- Company Policies
- Other Important Documents

Your prompt action will help us complete your onboarding smoothly.

If you need any assistance, our HR team is here to help!

Welcome aboard!
Human Resources Team`,
  },
]

export default function NotificationTemplateModal({
  method,
  onClose,
  onConfirm,
}: NotificationTemplateModalProps) {
  const [selectedSmsTemplate, setSelectedSmsTemplate] = useState<string>('sms-1')
  const [selectedEmailTemplate, setSelectedEmailTemplate] = useState<string>('email-1')
  const [useCustomSms, setUseCustomSms] = useState(false)
  const [useCustomEmail, setUseCustomEmail] = useState(false)
  const [customSmsContent, setCustomSmsContent] = useState('')
  const [customEmailSubject, setCustomEmailSubject] = useState('')
  const [customEmailContent, setCustomEmailContent] = useState('')

const getSmsContent = () => {
    if (useCustomSms) {
      return customSmsContent
    }
    return SMS_TEMPLATES.find((t) => t.id === selectedSmsTemplate)?.content || ''
  }

const getEmailContent = () => {
    if (useCustomEmail) {
      return {
        subject: customEmailSubject,
        content: customEmailContent,
      }
    }
    const template = EMAIL_TEMPLATES.find((t) => t.id === selectedEmailTemplate)
    return {
      subject: template?.subject || '',
      content: template?.content || '',
    }
  }

const handleConfirm = () => {
    const templates: { sms?: string; email?: string } = {}
    
    if (method === 'sms' || method === 'both') {
      templates.sms = getSmsContent()
    }
    
    if (method === 'email' || method === 'both') {
      const email = getEmailContent()
      templates.email = `Subject: ${email.subject}\n\n${email.content}`
    }

onConfirm(templates)
  }

const isValidSmS = useCustomSms ? customSmsContent.trim().length > 0 : selectedSmsTemplate
  const isValidEmail = useCustomEmail 
    ? customEmailSubject.trim().length > 0 && customEmailContent.trim().length > 0 
    : selectedEmailTemplate

const canSubmit = (method === 'sms' && isValidSmS) ||
    (method === 'email' && isValidEmail) ||
    (method === 'both' && isValidSmS && isValidEmail)

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-card rounded-lg shadow-lg max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
        {/* Header */}
        <div className="sticky top-0 border-b border-border bg-card px-6 py-4 flex items-center justify-between flex-shrink-0">
          <h2 className="text-2xl font-semibold text-foreground">
            {method === 'both' ? 'SMS & Email Templates' : method === 'sms' ? 'SMS Template' : 'Email Template'}
          </h2>
          <button
            onClick={onClose}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
            <X className="h-6 w-6" />
          </button>
        </div>

{/* Content */}
        <div className="flex-1 overflow-y-auto">
          <div className="p-6 space-y-8">
            {/* SMS Section */}
            {(method === 'sms' || method === 'both') && (
              <div className="border border-border rounded-lg p-6 space-y-4">
                <div className="flex items-center gap-2 mb-4">
                  <MessageSquare className="h-5 w-5 text-primary" />
                  <h3 className="text-lg font-semibold text-foreground">SMS Message</h3>
                </div>

{!useCustomSms ? (
                  <>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                      {SMS_TEMPLATES.map((template) => (
                        <button
                          key={template.id}
                          onClick={() => setSelectedSmsTemplate(template.id)}
                          className={`p-4 rounded-lg border-2 transition-all text-left ${
                            selectedSmsTemplate === template.id
                              ? 'border-primary bg-primary/5'
                              : 'border-border hover:border-muted-foreground'
                          }`}
                        >
                          <p className="font-medium text-sm text-foreground">{template.name}</p>
                          <p className="text-xs text-muted-foreground mt-2 line-clamp-2">{template.content}</p>
                        </button>
                      ))}
                    </div>

<div className="bg-muted/20 rounded-lg p-4 border border-border">
                      <p className="text-sm font-medium text-foreground mb-3">Preview:</p>
                      <p className="text-sm text-foreground whitespace-pre-wrap">{getSmsContent()}</p>
                    </div>
                  </>
                ) : (
                  <textarea
                    value={customSmsContent}
                    onChange={(e) => setCustomSmsContent(e.target.value)}
                    placeholder="Compose your custom SMS message..."
                    className="w-full h-32 p-4 rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                  />
                )}

<button
                  onClick={() => {
                    setUseCustomSms(!useCustomSms)
                    setCustomSmsContent('')
                  }}
                  className="flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors"
                >
                  <Edit3 className="h-4 w-4" />
                  {useCustomSms ? 'Use Template' : 'Write Custom Message'}
                </button>
              </div>
            )}

{/* Email Section */}
            {(method === 'email' || method === 'both') && (
              <div className="border border-border rounded-lg p-6 space-y-4">
                <div className="flex items-center gap-2 mb-4">
                  <Mail className="h-5 w-5 text-primary" />
                  <h3 className="text-lg font-semibold text-foreground">Email Message</h3>
                </div>

{!useCustomEmail ? (
                  <>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                      {EMAIL_TEMPLATES.map((template) => (
                        <button
                          key={template.id}
                          onClick={() => setSelectedEmailTemplate(template.id)}
                          className={`p-4 rounded-lg border-2 transition-all text-left ${
                            selectedEmailTemplate === template.id
                              ? 'border-primary bg-primary/5'
                              : 'border-border hover:border-muted-foreground'
                          }`}
                        >
                          <p className="font-medium text-sm text-foreground">{template.name}</p>
                          <p className="text-xs text-muted-foreground mt-2 line-clamp-2">{template.subject}</p>
                        </button>
                      ))}
                    </div>

<div className="bg-muted/20 rounded-lg p-4 border border-border space-y-3">
                      <div>
                        <p className="text-xs font-medium text-muted-foreground mb-1">Subject:</p>
                        <p className="text-sm font-medium text-foreground">{getEmailContent().subject}</p>
                      </div>
                      <div>
                        <p className="text-xs font-medium text-muted-foreground mb-1">Preview:</p>
                        <p className="text-sm text-foreground whitespace-pre-wrap line-clamp-6">{getEmailContent().content}</p>
                      </div>
                    </div>
                  </>
                ) : (
                  <div className="space-y-3">
                    <div>
                      <label className="text-sm font-medium text-foreground block mb-2">Subject</label>
                      <Input
                        value={customEmailSubject}
                        onChange={(e) => setCustomEmailSubject(e.target.value)}
                        placeholder="Enter email subject..."
                        className="bg-background border-border text-foreground"
                      />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-foreground block mb-2">Message</label>
                      <textarea
                        value={customEmailContent}
                        onChange={(e) => setCustomEmailContent(e.target.value)}
                        placeholder="Compose your custom email message..."
                        className="w-full h-40 p-4 rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                      />
                    </div>
                  </div>
                )}

<button
                  onClick={() => {
                    setUseCustomEmail(!useCustomEmail)
                    setCustomEmailSubject('')
                    setCustomEmailContent('')
                  }}
                  className="flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors"
                >
                  <Edit3 className="h-4 w-4" />
                  {useCustomEmail ? 'Use Template' : 'Write Custom Message'}
                </button>
              </div>
            )}
          </div>
        </div>

{/* Footer */}
        <div className="border-t border-border bg-muted/20 px-6 py-4 flex justify-end gap-3 flex-shrink-0">
          <Button
            variant="outline"
            onClick={onClose}
            className="border-border text-foreground hover:bg-muted bg-transparent"
          >
            Cancel
          </Button>
          <Button
            onClick={handleConfirm}
            disabled={!canSubmit}
            className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Continue to Confirmation
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-recipients-status.tsx" isMerged="true"
'use client'

import { useState, useMemo } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { X, Search, CheckCircle2, Clock, AlertCircle, Eye } from 'lucide-react'

export type RecipientStatus = 'pending' | 'received' | 'read'

interface Recipient {
  id: string
  name: string
  email: string
  position: string
  department: string
  status: RecipientStatus
  sentDate: string
  readDate?: string
}

interface DocumentRecipientsStatusProps {
  documentTitle: string
  onClose: () => void
}

const SAMPLE_RECIPIENTS: Recipient[] = [
  {
    id: '1',
    name: 'Alice Johnson',
    email: 'alice@company.com',
    position: 'Business Analyst',
    department: 'Insurtech',
    status: 'read',
    sentDate: '2026-01-23 09:30 AM',
    readDate: '2026-01-23 10:15 AM',
  },
  {
    id: '2',
    name: 'Bob Smith',
    email: 'bob@company.com',
    position: 'Business Analyst',
    department: 'Insurtech',
    status: 'received',
    sentDate: '2026-01-23 09:30 AM',
  },
  {
    id: '3',
    name: 'Carol Williams',
    email: 'carol@company.com',
    position: 'Sales Agent',
    department: 'Marketing',
    status: 'pending',
    sentDate: '2026-01-23 09:30 AM',
  },
  {
    id: '4',
    name: 'David Brown',
    email: 'david@company.com',
    position: 'Sales Agent',
    department: 'Sales',
    status: 'read',
    sentDate: '2026-01-23 09:30 AM',
    readDate: '2026-01-23 09:45 AM',
  },
  {
    id: '5',
    name: 'Emma Davis',
    email: 'emma@company.com',
    position: 'HR Assistant',
    department: 'Finance',
    status: 'received',
    sentDate: '2026-01-23 09:30 AM',
  },
]

const STATUS_CONFIG = {
  pending: {
    label: 'Pending',
    color: 'bg-amber-100 text-amber-800',
    icon: AlertCircle,
    description: 'Awaiting delivery',
  },
  received: {
    label: 'Received',
    color: 'bg-blue-100 text-blue-800',
    icon: Clock,
    description: 'Document delivered',
  },
  read: {
    label: 'Read',
    color: 'bg-emerald-100 text-emerald-800',
    icon: CheckCircle2,
    description: 'Document opened',
  },
}

export default function DocumentRecipientsStatus({
  documentTitle,
  onClose,
}: DocumentRecipientsStatusProps) {
  const [searchQuery, setSearchQuery] = useState('')
  const [filterStatus, setFilterStatus] = useState<RecipientStatus | 'all'>('all')

const filteredRecipients = useMemo(() => {
    return SAMPLE_RECIPIENTS.filter((recipient) => {
      const matchesSearch =
        recipient.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        recipient.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
        recipient.position.toLowerCase().includes(searchQuery.toLowerCase())

const matchesStatus = filterStatus === 'all' || recipient.status === filterStatus

return matchesSearch && matchesStatus
    })
  }, [searchQuery, filterStatus])

const stats = {
    total: SAMPLE_RECIPIENTS.length,
    read: SAMPLE_RECIPIENTS.filter((r) => r.status === 'read').length,
    received: SAMPLE_RECIPIENTS.filter((r) => r.status === 'received').length,
    pending: SAMPLE_RECIPIENTS.filter((r) => r.status === 'pending').length,
  }

const StatusIcon = STATUS_CONFIG[filterStatus === 'all' ? 'pending' : filterStatus].icon

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-card rounded-lg shadow-lg max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
        {/* Modal Header */}
        <div className="sticky top-0 border-b border-border bg-card px-6 py-4 flex items-center justify-between flex-shrink-0">
          <div>
            <h2 className="text-2xl font-semibold text-foreground">{documentTitle}</h2>
            <p className="text-sm text-muted-foreground mt-1">Recipients & Status Tracking</p>
          </div>
          <button
            onClick={onClose}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
            <X className="h-6 w-6" />
          </button>
        </div>

{/* Stats Overview */}
        <div className="border-b border-border bg-muted/20 px-6 py-4 grid grid-cols-4 gap-4">
          <div
            className="bg-background rounded-lg p-4 border border-border cursor-pointer hover:bg-muted/30 transition-colors"
            onClick={() => setFilterStatus('all')}
          >
            <p className="text-sm text-muted-foreground">Total Recipients</p>
            <p className="text-2xl font-bold text-foreground">{stats.total}</p>
          </div>
          <div
            className="bg-background rounded-lg p-4 border border-emerald-200 cursor-pointer hover:bg-emerald-50/30 transition-colors"
            onClick={() => setFilterStatus('read')}
          >
            <p className="text-sm text-emerald-700">Read</p>
            <p className="text-2xl font-bold text-emerald-600">{stats.read}</p>
          </div>
          <div
            className="bg-background rounded-lg p-4 border border-blue-200 cursor-pointer hover:bg-blue-50/30 transition-colors"
            onClick={() => setFilterStatus('received')}
          >
            <p className="text-sm text-blue-700">Received</p>
            <p className="text-2xl font-bold text-blue-600">{stats.received}</p>
          </div>
          <div
            className="bg-background rounded-lg p-4 border border-amber-200 cursor-pointer hover:bg-amber-50/30 transition-colors"
            onClick={() => setFilterStatus('pending')}
          >
            <p className="text-sm text-amber-700">Pending</p>
            <p className="text-2xl font-bold text-amber-600">{stats.pending}</p>
          </div>
        </div>

{/* Search and Filter */}
        <div className="border-b border-border bg-muted/20 px-6 py-4 flex-shrink-0 space-y-4">
          <div className="flex items-center gap-2 rounded-lg border border-border bg-background px-4 py-2">
            <Search className="h-5 w-5 text-muted-foreground" />
            <Input
              type="text"
              placeholder="Search by name, email, or position..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="border-0 bg-transparent p-0 text-foreground placeholder:text-muted-foreground focus-visible:ring-0"
            />
          </div>

<div className="flex gap-2 flex-wrap">
            {(['all', 'read', 'received', 'pending'] as const).map((status) => {
              const config = status === 'all' ? { label: 'All', color: 'bg-muted' } : STATUS_CONFIG[status]
              const isActive = filterStatus === status

return (
                <button
                  key={status}
                  onClick={() => setFilterStatus(status)}
                  className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                    isActive
                      ? status === 'all'
                        ? 'bg-foreground text-background'
                        : config.color
                      : 'bg-background border border-border text-foreground hover:bg-muted'
                  }`}
                >
                  {config.label}
                </button>
              )
            })}
          </div>
        </div>

{/* Recipients List */}
        <div className="flex-1 overflow-y-auto">
          <div className="divide-y divide-border">
            {filteredRecipients.length > 0 ? (
              filteredRecipients.map((recipient) => {
                const statusConfig = STATUS_CONFIG[recipient.status]
                const IconComponent = statusConfig.icon

return (
                  <div
                    key={recipient.id}
                    className="px-6 py-4 hover:bg-muted/30 transition-colors"
                  >
                    <div className="flex items-start justify-between gap-4">
                      <div className="flex-1">
                        <div className="flex items-center gap-3">
                          <div>
                            <h3 className="font-medium text-foreground">{recipient.name}</h3>
                            <p className="text-sm text-muted-foreground">{recipient.email}</p>
                            <p className="text-xs text-muted-foreground mt-1">
                              {recipient.position} • {recipient.department}
                            </p>
                          </div>
                        </div>
                      </div>

<div className="flex flex-col items-end gap-3">
                        <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${statusConfig.color}`}>
                          <IconComponent className="h-4 w-4" />
                          <span className="text-sm font-medium">{statusConfig.label}</span>
                        </div>

<div className="text-right space-y-1">
                          <p className="text-xs text-muted-foreground">
                            Sent: {recipient.sentDate}
                          </p>
                          {recipient.readDate && (
                            <p className="text-xs text-emerald-600 flex items-center justify-end gap-1">
                              <Eye className="h-3 w-3" />
                              Read: {recipient.readDate}
                            </p>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })
            ) : (
              <div className="px-6 py-12 text-center">
                <p className="text-muted-foreground">No recipients found matching your filters.</p>
              </div>
            )}
          </div>
        </div>

{/* Modal Footer */}
        <div className="border-t border-border bg-muted/20 px-6 py-4 flex justify-end">
          <Button
            onClick={onClose}
            className="bg-primary text-primary-foreground hover:bg-primary/90"
          >
            Close
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-list-item.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Archive, Users } from 'lucide-react'
import DocumentRecipientsStatus from './document-recipients-status'

interface Document {
  id: string
  title: string
  type: string
}

interface DocumentListItemProps {
  document: Document
  isSelected: boolean
  onToggleSelect: () => void
  onView: () => void
}

export default function DocumentListItem({
  document,
  isSelected,
  onToggleSelect,
  onView,
}: DocumentListItemProps) {
  const [isArchiving, setIsArchiving] = useState(false)
  const [showRecipientsStatus, setShowRecipientsStatus] = useState(false)

const handleArchive = async () => {
    setIsArchiving(true)
    // Simulate archive action
    setTimeout(() => {
      setIsArchiving(false)
      alert(`"${document.title}" has been archived`)
    }, 300)
  }

return (
    <div
      className={`flex items-center gap-4 rounded-lg border px-4 py-4 transition-colors ${
        isSelected
          ? 'border-primary bg-primary/5'
          : 'border-border bg-card hover:bg-muted/30'
      }`}
    >
      <input
        type="checkbox"
        checked={isSelected}
        onChange={onToggleSelect}
        className="h-5 w-5 rounded border-border cursor-pointer accent-primary"
      />

<div className="flex-1">
        <h3 className="font-medium text-foreground">{document.title}</h3>
      </div>

<Button
          variant="outline"
          size="sm"
          onClick={() => setShowRecipientsStatus(true)}
          className="border-border text-foreground hover:bg-muted bg-transparent flex items-center gap-2"
          title="View recipient status"
        >
          <Users className="h-4 w-4" />
          Recipients
        </Button>

<Button
          variant="outline"
          size="sm"
          onClick={handleArchive}
          disabled={isArchiving}
          className="border-border text-foreground hover:bg-muted bg-transparent"
          title="Archive this document"
        >
          {isArchiving ? (
            <span>Archiving...</span>
          ) : (
            <>
              <Archive className="h-4 w-4 mr-2" />
              Archive
            </>
          )}
        </Button>
      </div>

{/* Recipients Status Modal */}
      {showRecipientsStatus && (
        <DocumentRecipientsStatus
          documentTitle={document.title}
          onClose={() => setShowRecipientsStatus(false)}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/employee/employee-sent-document-card.tsx" isMerged="true"
'use client'

import { Button } from '@/components/ui/button'
import { Eye, Check, Clock } from 'lucide-react'

interface SentDocument {
  id: string
  title: string
  sentTo: string
  sentDate: string
  received: boolean
  readDate?: string
  content?: string
}

interface EmployeeSentDocumentCardProps {
  document: SentDocument
  onView: () => void
  onMarkReceived: () => void
}

function formatDistanceToNow(date: Date): string {
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
  
  if (diffDays === 0) return 'today'
  if (diffDays === 1) return 'yesterday'
  if (diffDays < 7) return `${diffDays} days ago`
  if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`
  if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`
  return `${Math.floor(diffDays / 365)} years ago`
}

export default function EmployeeSentDocumentCard({
  document,
  onView,
  onMarkReceived,
}: EmployeeSentDocumentCardProps) {
  const sentDate = new Date(document.sentDate)
  const readDate = document.readDate ? new Date(document.readDate) : null
  const daysAgo = formatDistanceToNow(sentDate)

return (
    <div className="rounded-lg border border-border bg-card p-4 hover:border-primary/50 transition-colors space-y-4">
      {/* Header */}
      <div className="space-y-2">
        <div className="flex items-start justify-between gap-2">
          <div className="flex-1">
            <h3 className="font-semibold text-foreground text-sm line-clamp-2">
              {document.title}
            </h3>
            <p className="text-xs text-muted-foreground mt-1">
              Sent to: <span className="font-medium text-foreground">{document.sentTo}</span>
            </p>
          </div>
          {/* Status Badge */}
          <div className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium flex-shrink-0 ${
            document.received
              ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200'
              : 'bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-200'
          }`}>
            {document.received ? (
              <>
                <Check className="h-3 w-3" />
                Received
              </>
            ) : (
              <>
                <Clock className="h-3 w-3" />
                Pending
              </>
            )}
          </div>
        </div>

{/* Dates */}
        <div className="space-y-1 text-xs text-muted-foreground">
          <p>Sent {daysAgo}</p>
          {readDate && (
            <p className="text-emerald-600 dark:text-emerald-400">
              Received on {readDate.toLocaleDateString()}
            </p>
          )}
        </div>
      </div>

{/* Action Buttons */}
      <div className="flex gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={onView}
          className="flex-1 border-border text-foreground hover:bg-muted bg-transparent"
        >
          <Eye className="h-4 w-4 mr-2" />
          View
        </Button>

{!document.received && (
          <Button
            size="sm"
            onClick={onMarkReceived}
            className="flex-1 bg-primary text-primary-foreground hover:bg-primary/90"
          >
            <Check className="h-4 w-4 mr-2" />
            Mark Received
          </Button>
        )}

{document.received && (
          <div className="flex-1 flex items-center justify-center rounded-md bg-muted/50 text-xs text-muted-foreground font-medium">
            ✓ Received
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/employee/employee-sent-documents.tsx" isMerged="true"
'use client'

import { useState, useMemo } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import EmployeeSentDocumentCard from './employee-sent-document-card'
import EmployeeViewDocumentModal from './modals/employee-view-document-modal'
import { Search, Send } from 'lucide-react'

interface SentDocument {
  id: string
  title: string
  sentTo: string
  sentDate: string
  received: boolean
  readDate?: string
  content?: string
}

const SAMPLE_SENT_DOCUMENTS: SentDocument[] = [
  {
    id: '1',
    title: 'Project Update - Q1 2024',
    sentTo: 'Team Manager',
    sentDate: '2024-01-15',
    received: true,
    readDate: '2024-01-15',
    content: 'Comprehensive project update covering Q1 2024 milestones and achievements.',
  },
  {
    id: '2',
    title: 'Meeting Agenda - January',
    sentTo: 'Department Head',
    sentDate: '2024-01-18',
    received: true,
    readDate: '2024-01-18',
    content: 'Agenda items for the January department meeting.',
  },
  {
    id: '3',
    title: 'Budget Proposal FY2024',
    sentTo: 'Finance Manager',
    sentDate: '2024-01-20',
    received: false,
    content: 'Proposed budget allocation for fiscal year 2024.',
  },
  {
    id: '4',
    title: 'Training Schedule Updates',
    sentTo: 'HR Manager',
    sentDate: '2024-01-10',
    received: true,
    readDate: '2024-01-11',
    content: 'Updated training schedule for all employees.',
  },
]

export default function EmployeeSentDocuments() {
  const [searchQuery, setSearchQuery] = useState('')
  const [documents, setDocuments] = useState<SentDocument[]>(SAMPLE_SENT_DOCUMENTS)
  const [selectedDocument, setSelectedDocument] = useState<SentDocument | null>(null)
  const [showViewModal, setShowViewModal] = useState(false)
  const [filterStatus, setFilterStatus] = useState<'all' | 'received' | 'pending'>('all')

const filteredDocuments = useMemo(() => {
    return documents.filter((doc) => {
      const matchesSearch =
        doc.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        doc.sentTo.toLowerCase().includes(searchQuery.toLowerCase())

if (filterStatus === 'received') {
        return matchesSearch && doc.received
      }
      if (filterStatus === 'pending') {
        return matchesSearch && !doc.received
      }
      return matchesSearch
    })
  }, [searchQuery, documents, filterStatus])

const handleViewDocument = (doc: SentDocument) => {
    setSelectedDocument(doc)
    setShowViewModal(true)
  }

const handleMarkReceived = (docId: string) => {
    setDocuments(
      documents.map((doc) =>
        doc.id === docId ? { ...doc, received: true, readDate: new Date().toISOString().split('T')[0] } : doc
      )
    )
  }

const receivedCount = documents.filter((d) => d.received).length
  const pendingCount = documents.filter((d) => !d.received).length

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-foreground flex items-center gap-2">
              <Send className="h-8 w-8" />
              Sent Documents
            </h1>
            <p className="text-sm text-muted-foreground mt-1">
              Track documents you've sent to managers and departments
            </p>
          </div>
        </div>

{/* Search and Filters */}
        <div className="space-y-4">
          <div className="flex items-center gap-2 rounded-lg border border-border bg-background px-4 py-2">
            <Search className="h-5 w-5 text-muted-foreground" />
            <Input
              type="text"
              placeholder="Search by document title or recipient..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="border-0 bg-transparent p-0 text-foreground placeholder:text-muted-foreground focus-visible:ring-0"
            />
          </div>

{/* Filter Tabs */}
          <div className="flex gap-2 flex-wrap">
            <Button
              onClick={() => setFilterStatus('all')}
              variant={filterStatus === 'all' ? 'default' : 'outline'}
              className={`${
                filterStatus === 'all'
                  ? 'bg-primary text-primary-foreground'
                  : 'border-border text-foreground hover:bg-muted bg-transparent'
              }`}
            >
              All ({documents.length})
            </Button>
            <Button
              onClick={() => setFilterStatus('received')}
              variant={filterStatus === 'received' ? 'default' : 'outline'}
              className={`${
                filterStatus === 'received'
                  ? 'bg-primary text-primary-foreground'
                  : 'border-border text-foreground hover:bg-muted bg-transparent'
              }`}
            >
              Received ({receivedCount})
            </Button>
            <Button
              onClick={() => setFilterStatus('pending')}
              variant={filterStatus === 'pending' ? 'default' : 'outline'}
              className={`${
                filterStatus === 'pending'
                  ? 'bg-primary text-primary-foreground'
                  : 'border-border text-foreground hover:bg-muted bg-transparent'
              }`}
            >
              Pending ({pendingCount})
            </Button>
          </div>
        </div>
      </div>

{/* Documents Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {filteredDocuments.length > 0 ? (
          filteredDocuments.map((doc) => (
            <EmployeeSentDocumentCard
              key={doc.id}
              document={doc}
              onView={() => handleViewDocument(doc)}
              onMarkReceived={() => handleMarkReceived(doc.id)}
            />
          ))
        ) : (
          <div className="col-span-full flex flex-col items-center justify-center py-12">
            <div className="text-center">
              <Send className="h-12 w-12 text-muted-foreground mx-auto mb-3 opacity-50" />
              <p className="text-foreground font-medium">No documents found</p>
              <p className="text-sm text-muted-foreground">
                {searchQuery
                  ? "Try adjusting your search criteria"
                  : "You haven't sent any documents yet"}
              </p>
            </div>
          </div>
        )}
      </div>

{/* View Document Modal */}
      {showViewModal && selectedDocument && (
        <EmployeeViewDocumentModal
          document={{
            id: selectedDocument.id,
            title: selectedDocument.title,
            sentBy: selectedDocument.sentTo,
            sentDate: selectedDocument.sentDate,
            accepted: selectedDocument.received,
            content: selectedDocument.content,
          }}
          onClose={() => {
            setShowViewModal(false)
            setSelectedDocument(null)
          }}
          onAccept={handleMarkReceived}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/modals/send-sms-email-modal.tsx" isMerged="true"
'use client'

import { useState, useMemo } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { X, Search, ChevronDown } from 'lucide-react'
import NotificationMethodModal from './notification-method-modal'
import NotificationTemplateModal from './notification-template-modal'

interface Employee {
  id: string
  name: string
  email: string
  phone?: string
  department: string
  unit: string
  position: string
  jobLevel: string
}

interface SendSmsEmailModalProps {
  onClose: () => void
}

const DEPARTMENTS = [
  'Insurtech',
  'HRAD',
  'Marketing',
  'Finance',
  'Sales',
  'Operation',
]

const UNITS = [
  'Business Unit',
  'Sysdev Unit',
  'DataWarehouse Unit',
]

const POSITIONS = [
  'Business Analyst',
  'HR Assistant',
  'Sales Agent',
  'Claims Assistant',
]

const JOB_LEVELS = [
  'Rank and File',
  'Supervisory',
  'Executive',
]

const SAMPLE_EMPLOYEES: Employee[] = [
  { id: '1', name: 'Alice Johnson', email: 'alice@company.com', phone: '+1234567890', department: 'Insurtech', unit: 'Business Unit', position: 'Business Analyst', jobLevel: 'Rank and File' },
  { id: '2', name: 'Bob Smith', email: 'bob@company.com', phone: '+1234567891', department: 'Insurtech', unit: 'Sysdev Unit', position: 'Business Analyst', jobLevel: 'Supervisory' },
  { id: '3', name: 'Carol Williams', email: 'carol@company.com', phone: '+1234567892', department: 'Marketing', unit: 'Business Unit', position: 'Sales Agent', jobLevel: 'Rank and File' },
  { id: '4', name: 'David Brown', email: 'david@company.com', phone: '+1234567893', department: 'Sales', unit: 'Business Unit', position: 'Sales Agent', jobLevel: 'Executive' },
  { id: '5', name: 'Emma Davis', email: 'emma@company.com', phone: '+1234567894', department: 'Finance', unit: 'DataWarehouse Unit', position: 'HR Assistant', jobLevel: 'Rank and File' },
  { id: '6', name: 'Frank Miller', email: 'frank@company.com', phone: '+1234567895', department: 'Operation', unit: 'Sysdev Unit', position: 'Claims Assistant', jobLevel: 'Supervisory' },
  { id: '7', name: 'Grace Lee', email: 'grace@company.com', phone: '+1234567896', department: 'HRAD', unit: 'Business Unit', position: 'HR Assistant', jobLevel: 'Executive' },
  { id: '8', name: 'Henry Wilson', email: 'henry@company.com', phone: '+1234567897', department: 'Insurtech', unit: 'DataWarehouse Unit', position: 'Business Analyst', jobLevel: 'Rank and File' },
  { id: '9', name: 'Iris Taylor', email: 'iris@company.com', phone: '+1234567898', department: 'Marketing', unit: 'Sysdev Unit', position: 'Claims Assistant', jobLevel: 'Supervisory' },
  { id: '10', name: 'Jack Anderson', email: 'jack@company.com', phone: '+1234567899', department: 'Sales', unit: 'DataWarehouse Unit', position: 'Sales Agent', jobLevel: 'Rank and File' },
]

export default function SendSmsEmailModal({
  onClose,
}: SendSmsEmailModalProps) {
  const [searchQuery, setSearchQuery] = useState('')
  const [selectedDepartments, setSelectedDepartments] = useState<Set<string>>(new Set())
  const [selectedUnits, setSelectedUnits] = useState<Set<string>>(new Set())
  const [selectedPositions, setSelectedPositions] = useState<Set<string>>(new Set())
  const [selectedJobLevels, setSelectedJobLevels] = useState<Set<string>>(new Set())
  const [selectedEmployees, setSelectedEmployees] = useState<Set<string>>(new Set())
  const [isSending, setIsSending] = useState(false)
  const [showDepartmentDropdown, setShowDepartmentDropdown] = useState(false)
  const [showUnitDropdown, setShowUnitDropdown] = useState(false)
  const [showPositionDropdown, setShowPositionDropdown] = useState(false)
  const [showJobLevelDropdown, setShowJobLevelDropdown] = useState(false)
  const [showNotificationMethod, setShowNotificationMethod] = useState(false)
  const [notificationMethod, setNotificationMethod] = useState<'sms' | 'email' | 'both' | null>(null)
  const [showTemplateSelection, setShowTemplateSelection] = useState(false)
  const [selectedTemplates, setSelectedTemplates] = useState<{ sms?: string; email?: string }>({})

const filteredEmployees = useMemo(() => {
    return SAMPLE_EMPLOYEES.filter((emp) => {
      const matchesSearch =
        emp.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        emp.email.toLowerCase().includes(searchQuery.toLowerCase())

const matchesDepartment = selectedDepartments.size === 0 || selectedDepartments.has(emp.department)
      const matchesUnit = selectedUnits.size === 0 || selectedUnits.has(emp.unit)
      const matchesPosition = selectedPositions.size === 0 || selectedPositions.has(emp.position)
      const matchesJobLevel = selectedJobLevels.size === 0 || selectedJobLevels.has(emp.jobLevel)

return matchesSearch && matchesDepartment && matchesUnit && matchesPosition && matchesJobLevel
    })
  }, [searchQuery, selectedDepartments, selectedUnits, selectedPositions, selectedJobLevels])

const toggleDepartment = (dept: string) => {
    const newDepts = new Set(selectedDepartments)
    if (newDepts.has(dept)) {
      newDepts.delete(dept)
    } else {
      newDepts.add(dept)
    }
    setSelectedDepartments(newDepts)
  }

const toggleUnit = (unit: string) => {
    const newUnits = new Set(selectedUnits)
    if (newUnits.has(unit)) {
      newUnits.delete(unit)
    } else {
      newUnits.add(unit)
    }
    setSelectedUnits(newUnits)
  }

const togglePosition = (position: string) => {
    const newPositions = new Set(selectedPositions)
    if (newPositions.has(position)) {
      newPositions.delete(position)
    } else {
      newPositions.add(position)
    }
    setSelectedPositions(newPositions)
  }

const toggleJobLevel = (jobLevel: string) => {
    const newLevels = new Set(selectedJobLevels)
    if (newLevels.has(jobLevel)) {
      newLevels.delete(jobLevel)
    } else {
      newLevels.add(jobLevel)
    }
    setSelectedJobLevels(newLevels)
  }

const toggleEmployeeSelection = (id: string) => {
    const newSelected = new Set(selectedEmployees)
    if (newSelected.has(id)) {
      newSelected.delete(id)
    } else {
      newSelected.add(id)
    }
    setSelectedEmployees(newSelected)
  }

const toggleSelectAll = () => {
    if (selectedEmployees.size === filteredEmployees.length) {
      setSelectedEmployees(new Set())
    } else {
      setSelectedEmployees(new Set(filteredEmployees.map((emp) => emp.id)))
    }
  }

const handleNotificationMethodSelect = (method: 'sms' | 'email' | 'both') => {
    setNotificationMethod(method)
    setShowNotificationMethod(false)
    setShowTemplateSelection(true)
  }

const handleTemplateSelection = (templates: { sms?: string; email?: string }) => {
    setSelectedTemplates(templates)
    setShowTemplateSelection(false)
    handleSend()
  }

const handleSend = async () => {
    setIsSending(true)
    setTimeout(() => {
      setIsSending(false)
      const methodText = notificationMethod === 'both' ? 'SMS and Email' : notificationMethod?.toUpperCase()
      alert(`SMS & Email sent to ${selectedEmployees.size} employee(s) via ${methodText}`)
      onClose()
    }, 500)
  }

const handleSendClick = () => {
    if (selectedEmployees.size === 0) return
    setShowNotificationMethod(true)
  }

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-card rounded-lg shadow-lg max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
        {/* Modal Header */}
        <div className="sticky top-0 border-b border-border bg-card px-6 py-4 flex items-center justify-between flex-shrink-0">
          <h2 className="text-2xl font-semibold text-foreground">Send SMS & Email</h2>
          <button
            onClick={onClose}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
            <X className="h-6 w-6" />
          </button>
        </div>

{/* Modal Content */}
        <div className="flex-1 overflow-y-auto">
          {/* Search and Filters */}
          <div className="border-b border-border bg-muted/20 px-6 py-4 space-y-4 flex-shrink-0">
            {/* Search Bar */}
            <div className="flex items-center gap-2 rounded-lg border border-border bg-background px-4 py-2">
              <Search className="h-5 w-5 text-muted-foreground" />
              <Input
                type="text"
                placeholder="Search by name or email..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="border-0 bg-transparent p-0 text-foreground placeholder:text-muted-foreground focus-visible:ring-0"
              />
            </div>

{/* All Filters */}
            <div className="flex gap-3 flex-wrap">
              {/* Department Filter */}
              <div className="relative">
                <button
                  onClick={() => setShowDepartmentDropdown(!showDepartmentDropdown)}
                  className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-background hover:bg-muted transition-colors text-sm text-foreground"
                >
                  Department {selectedDepartments.size > 0 && `(${selectedDepartments.size})`}
                  <ChevronDown className="h-4 w-4" />
                </button>
                {showDepartmentDropdown && (
                  <div className="absolute top-full left-0 mt-2 bg-background border border-border rounded-lg shadow-lg z-10 min-w-48">
                    {DEPARTMENTS.map((dept) => (
                      <button
                        key={dept}
                        onClick={() => toggleDepartment(dept)}
                        className="w-full text-left px-4 py-2 hover:bg-muted transition-colors flex items-center gap-2 text-sm"
                      >
                        <input
                          type="checkbox"
                          checked={selectedDepartments.has(dept)}
                          onChange={() => {}}
                          className="h-4 w-4 rounded border-border cursor-pointer accent-primary"
                        />
                        {dept}
                      </button>
                    ))}
                  </div>
                )}
              </div>

{/* Unit Filter */}
              <div className="relative">
                <button
                  onClick={() => setShowUnitDropdown(!showUnitDropdown)}
                  className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-background hover:bg-muted transition-colors text-sm text-foreground"
                >
                  Unit {selectedUnits.size > 0 && `(${selectedUnits.size})`}
                  <ChevronDown className="h-4 w-4" />
                </button>
                {showUnitDropdown && (
                  <div className="absolute top-full left-0 mt-2 bg-background border border-border rounded-lg shadow-lg z-10 min-w-48">
                    {UNITS.map((unit) => (
                      <button
                        key={unit}
                        onClick={() => toggleUnit(unit)}
                        className="w-full text-left px-4 py-2 hover:bg-muted transition-colors flex items-center gap-2 text-sm"
                      >
                        <input
                          type="checkbox"
                          checked={selectedUnits.has(unit)}
                          onChange={() => {}}
                          className="h-4 w-4 rounded border-border cursor-pointer accent-primary"
                        />
                        {unit}
                      </button>
                    ))}
                  </div>
                )}
              </div>

{/* Position Filter */}
              <div className="relative">
                <button
                  onClick={() => setShowPositionDropdown(!showPositionDropdown)}
                  className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-background hover:bg-muted transition-colors text-sm text-foreground"
                >
                  Position {selectedPositions.size > 0 && `(${selectedPositions.size})`}
                  <ChevronDown className="h-4 w-4" />
                </button>
                {showPositionDropdown && (
                  <div className="absolute top-full left-0 mt-2 bg-background border border-border rounded-lg shadow-lg z-10 min-w-56">
                    {POSITIONS.map((position) => (
                      <button
                        key={position}
                        onClick={() => togglePosition(position)}
                        className="w-full text-left px-4 py-2 hover:bg-muted transition-colors flex items-center gap-2 text-sm"
                      >
                        <input
                          type="checkbox"
                          checked={selectedPositions.has(position)}
                          onChange={() => {}}
                          className="h-4 w-4 rounded border-border cursor-pointer accent-primary"
                        />
                        {position}
                      </button>
                    ))}
                  </div>
                )}
              </div>

{/* Job Level Filter */}
              <div className="relative">
                <button
                  onClick={() => setShowJobLevelDropdown(!showJobLevelDropdown)}
                  className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-background hover:bg-muted transition-colors text-sm text-foreground"
                >
                  Job Level {selectedJobLevels.size > 0 && `(${selectedJobLevels.size})`}
                  <ChevronDown className="h-4 w-4" />
                </button>
                {showJobLevelDropdown && (
                  <div className="absolute top-full left-0 mt-2 bg-background border border-border rounded-lg shadow-lg z-10 min-w-48">
                    {JOB_LEVELS.map((level) => (
                      <button
                        key={level}
                        onClick={() => toggleJobLevel(level)}
                        className="w-full text-left px-4 py-2 hover:bg-muted transition-colors flex items-center gap-2 text-sm"
                      >
                        <input
                          type="checkbox"
                          checked={selectedJobLevels.has(level)}
                          onChange={() => {}}
                          className="h-4 w-4 rounded border-border cursor-pointer accent-primary"
                        />
                        {level}
                      </button>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>

{/* Employee List */}
          <div className="px-6 py-4">
            <div className="space-y-2">
              {/* Select All */}
              <label className="flex items-center gap-3 p-3 rounded-lg hover:bg-muted transition-colors cursor-pointer">
                <input
                  type="checkbox"
                  checked={selectedEmployees.size === filteredEmployees.length && filteredEmployees.length > 0}
                  onChange={toggleSelectAll}
                  className="h-4 w-4 rounded border-border cursor-pointer accent-primary"
                />
                <span className="text-sm font-medium text-foreground">
                  Select All ({filteredEmployees.length})
                </span>
              </label>

{/* Employee Items */}
              <div className="max-h-72 overflow-y-auto space-y-1">
                {filteredEmployees.map((employee) => (
                  <label
                    key={employee.id}
                    className="flex items-center gap-3 p-3 rounded-lg hover:bg-muted transition-colors cursor-pointer"
                  >
                    <input
                      type="checkbox"
                      checked={selectedEmployees.has(employee.id)}
                      onChange={() => toggleEmployeeSelection(employee.id)}
                      className="h-4 w-4 rounded border-border cursor-pointer accent-primary"
                    />
                    <div className="flex-1">
                      <p className="font-medium text-foreground">{employee.name}</p>
                      <p className="text-sm text-muted-foreground">
                        {employee.email} • {employee.phone} • {employee.position}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {employee.department} • {employee.unit} • {employee.jobLevel}
                      </p>
                    </div>
                  </label>
                ))}
              </div>
            </div>
          </div>
        </div>

{/* Modal Footer */}
        <div className="border-t border-border bg-muted/20 px-6 py-4 flex justify-end gap-3 flex-shrink-0">
          <Button
            variant="outline"
            onClick={onClose}
            className="border-border text-foreground hover:bg-muted bg-transparent"
          >
            Cancel
          </Button>
          <Button
            onClick={handleSendClick}
            disabled={selectedEmployees.size === 0 || isSending}
            className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isSending ? 'Sending...' : `Send to ${selectedEmployees.size} Employee${selectedEmployees.size !== 1 ? 's' : ''}`}
          </Button>
        </div>

{/* Notification Method Modal */}
        {showNotificationMethod && (
          <NotificationMethodModal
            onClose={() => setShowNotificationMethod(false)}
            onSelectMethod={handleNotificationMethodSelect}
          />
        )}

{/* Notification Template Modal */}
        {showTemplateSelection && notificationMethod && (
          <NotificationTemplateModal
            method={notificationMethod}
            onClose={() => setShowTemplateSelection(false)}
            onConfirm={handleTemplateSelection}
          />
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-list.tsx" isMerged="true"
'use client'

import { useState, useMemo } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import DocumentListItem from './document-list-item'
import CreateDocumentModal from './modals/create-document-modal'
import SendSmsEmailModal from './modals/send-sms-email-modal'
import { Search, Filter, Download, MessageSquare } from 'lucide-react'

interface Document {
  id: string
  title: string
  type: string
}

interface DocumentListProps {
  onViewDocument: (title: string) => void
  onSendClick: () => void
}

const SAMPLE_DOCUMENTS: Document[] = [
  { id: '1', title: 'Employee Document Acknowledgement Form', type: 'form' },
  { id: '2', title: 'Pledge of Confidentiality', type: 'agreement' },
  { id: '3', title: 'Employee Non-Disclosure Agreement', type: 'agreement' },
]

export default function DocumentList({
  onViewDocument,
  onSendClick,
}: DocumentListProps) {
  const [searchQuery, setSearchQuery] = useState('')
  const [selectedDocs, setSelectedDocs] = useState<Set<string>>(new Set())
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [showSmsEmailModal, setShowSmsEmailModal] = useState(false)
  const [documents, setDocuments] = useState<Document[]>(SAMPLE_DOCUMENTS)

const filteredDocuments = useMemo(() => {
    return documents.filter((doc) =>
      doc.title.toLowerCase().includes(searchQuery.toLowerCase())
    )
  }, [searchQuery, documents])

const handleCreateDocument = (doc: { title: string; content: string }) => {
    const newDoc: Document = {
      id: String(documents.length + 1),
      title: doc.title,
      type: 'document',
    }
    setDocuments([...documents, newDoc])
  }

const toggleDocumentSelection = (id: string) => {
    const newSelected = new Set(selectedDocs)
    if (newSelected.has(id)) {
      newSelected.delete(id)
    } else {
      newSelected.add(id)
    }
    setSelectedDocs(newSelected)
  }

const toggleSelectAll = () => {
    if (selectedDocs.size === filteredDocuments.length) {
      setSelectedDocs(new Set())
    } else {
      setSelectedDocs(new Set(filteredDocuments.map((doc) => doc.id)))
    }
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <div className="border-b border-border bg-card">
        <div className="px-8 py-6">
          <h1 className="text-4xl font-bold text-foreground">Document List</h1>
        </div>
      </div>

{/* User Profile Section */}
      <div className="border-b border-border bg-card px-8 py-4">
        <div className="flex items-center justify-end gap-3">
          <div className="h-6 w-6 rounded bg-muted" />
          <div className="h-6 w-6 rounded bg-muted" />
          <div className="h-6 w-6 rounded-full bg-primary" />
          <span className="text-sm font-medium text-foreground">Name</span>
        </div>
      </div>

{/* Content */}
      <div className="px-8 py-8">
        {/* Search and Controls */}
        <div className="mb-8 flex items-center justify-between gap-4">
          <div className="flex flex-1 items-center gap-2 rounded-lg border border-border bg-card px-4 py-3">
            <Search className="h-5 w-5 text-muted-foreground" />
            <Input
              type="text"
              placeholder="Search"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="border-0 bg-transparent p-0 text-foreground placeholder:text-muted-foreground focus-visible:ring-0"
            />
          </div>

<Button
            onClick={onSendClick}
            disabled={selectedDocs.size === 0}
            className="bg-primary text-primary-foreground hover:bg-primary/90"
          >
            Send to Employee
          </Button>

<Button
            onClick={() => setShowSmsEmailModal(true)}
            className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2"
          >
            <MessageSquare className="h-4 w-4" />
            Send SMS & Email
          </Button>

<Button
            onClick={() => setShowCreateModal(true)}
            className="bg-primary text-primary-foreground hover:bg-primary/90"
          >
            Create Document
          </Button>
        </div>

{/* Send SMS & Email Modal */}
        {showSmsEmailModal && (
          <SendSmsEmailModal
            onClose={() => setShowSmsEmailModal(false)}
          />
        )}

{/* Create Document Modal */}
        {showCreateModal && (
          <CreateDocumentModal
            onClose={() => setShowCreateModal(false)}
            onCreate={handleCreateDocument}
          />
        )}

{/* Documents List */}
        <div className="space-y-3">
          {/* Header Row */}
          <div className="flex items-center gap-4 px-4 py-3 rounded-lg bg-muted/30 border border-border">
            <input
              type="checkbox"
              checked={
                selectedDocs.size === filteredDocuments.length &&
                filteredDocuments.length > 0
              }
              onChange={toggleSelectAll}
              className="h-5 w-5 rounded border-border cursor-pointer accent-primary"
            />
            <span className="text-sm font-medium text-muted-foreground flex-1">
              {filteredDocuments.length}{' '}
              {filteredDocuments.length === 1 ? 'document' : 'documents'}
            </span>
          </div>

{/* Document Items */}
          {filteredDocuments.map((doc) => (
            <DocumentListItem
              key={doc.id}
              document={doc}
              isSelected={selectedDocs.has(doc.id)}
              onToggleSelect={() => toggleDocumentSelection(doc.id)}
              onView={() => onViewDocument(doc.title)}
            />
          ))}

{filteredDocuments.length === 0 && (
            <div className="text-center py-12">
              <p className="text-muted-foreground">No documents found</p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/modals/send-to-employee-modal.tsx"
'use client'

import { useState, useMemo } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { X, Search, Check, ChevronDown } from 'lucide-react'
import SendConfirmationModal from './send-confirmation-modal'
import NotificationMethodModal from './notification-method-modal'
import NotificationTemplateModal from './notification-template-modal'

interface Employee {
  id: string
  name: string
  email: string
  phone?: string
  department: string
  unit: string
  position: string
  jobLevel: string
}

interface SendToEmployeeModalProps {
  onClose: () => void
}

const DEPARTMENTS = [
  'Insurtech',
  'HRAD',
  'Marketing',
  'Finance',
  'Sales',
  'Operation',
]

const UNITS = [
  'Business Unit',
  'Sysdev Unit',
  'DataWarehouse Unit',
]

const POSITIONS = [
  'Business Analyst',
  'HR Assistant',
  'Sales Agent',
  'Claims Assistant',
]

const JOB_LEVELS = [
  'Rank and File',
  'Supervisory',
  'Executive',
]

const SAMPLE_EMPLOYEES: Employee[] = [
  { id: '1', name: 'Alice Johnson', email: 'alice@company.com', phone: '+1-555-0101', department: 'Insurtech', unit: 'Business Unit', position: 'Business Analyst', jobLevel: 'Rank and File' },
  { id: '2', name: 'Bob Smith', email: 'bob@company.com', phone: '+1-555-0102', department: 'Insurtech', unit: 'Sysdev Unit', position: 'Business Analyst', jobLevel: 'Supervisory' },
  { id: '3', name: 'Carol Williams', email: 'carol@company.com', phone: '+1-555-0103', department: 'Marketing', unit: 'Business Unit', position: 'Sales Agent', jobLevel: 'Rank and File' },
  { id: '4', name: 'David Brown', email: 'david@company.com', phone: '+1-555-0104', department: 'Sales', unit: 'Business Unit', position: 'Sales Agent', jobLevel: 'Executive' },
  { id: '5', name: 'Emma Davis', email: 'emma@company.com', phone: '+1-555-0105', department: 'Finance', unit: 'DataWarehouse Unit', position: 'HR Assistant', jobLevel: 'Rank and File' },
  { id: '6', name: 'Frank Miller', email: 'frank@company.com', phone: '+1-555-0106', department: 'Operation', unit: 'Sysdev Unit', position: 'Claims Assistant', jobLevel: 'Supervisory' },
  { id: '7', name: 'Grace Lee', email: 'grace@company.com', phone: '+1-555-0107', department: 'HRAD', unit: 'Business Unit', position: 'HR Assistant', jobLevel: 'Executive' },
  { id: '8', name: 'Henry Wilson', email: 'henry@company.com', phone: '+1-555-0108', department: 'Insurtech', unit: 'DataWarehouse Unit', position: 'Business Analyst', jobLevel: 'Rank and File' },
  { id: '9', name: 'Iris Taylor', email: 'iris@company.com', phone: '+1-555-0109', department: 'Marketing', unit: 'Sysdev Unit', position: 'Claims Assistant', jobLevel: 'Supervisory' },
  { id: '10', name: 'Jack Anderson', email: 'jack@company.com', phone: '+1-555-0110', department: 'Sales', unit: 'DataWarehouse Unit', position: 'Sales Agent', jobLevel: 'Rank and File' },
]

export default function SendToEmployeeModal({
  onClose,
}: SendToEmployeeModalProps) {
  const [searchQuery, setSearchQuery] = useState('')
  const [selectedDepartments, setSelectedDepartments] = useState<Set<string>>(new Set())
  const [selectedUnits, setSelectedUnits] = useState<Set<string>>(new Set())
  const [selectedPositions, setSelectedPositions] = useState<Set<string>>(new Set())
  const [selectedJobLevels, setSelectedJobLevels] = useState<Set<string>>(new Set())
  const [selectedEmployees, setSelectedEmployees] = useState<Set<string>>(new Set())
  const [isSending, setIsSending] = useState(false)
  const [showDepartmentDropdown, setShowDepartmentDropdown] = useState(false)
  const [showUnitDropdown, setShowUnitDropdown] = useState(false)
  const [showPositionDropdown, setShowPositionDropdown] = useState(false)
  const [showJobLevelDropdown, setShowJobLevelDropdown] = useState(false)
  const [showNotificationMethod, setShowNotificationMethod] = useState(false)
  const [notificationMethod, setNotificationMethod] = useState<'sms' | 'email' | 'both' | null>(null)
  const [showTemplateSelection, setShowTemplateSelection] = useState(false)
  const [selectedTemplates, setSelectedTemplates] = useState<{ sms?: string; email?: string }>({})
  const [showConfirmation, setShowConfirmation] = useState(false)

return matchesSearch && matchesDepartment && matchesUnit && matchesPosition && matchesJobLevel
    })
  }, [searchQuery, selectedDepartments, selectedUnits, selectedPositions, selectedJobLevels])

const getSelectedEmployeeObjects = () => {
    return SAMPLE_EMPLOYEES.filter((emp) => selectedEmployees.has(emp.id))
  }

const handleSendClick = () => {
    setShowNotificationMethod(true)
  }

const handleNotificationMethodSelect = (method: 'sms' | 'email' | 'both') => {
    setNotificationMethod(method)
    setShowNotificationMethod(false)
    setShowTemplateSelection(true)
  }

const handleTemplateSelection = (templates: { sms?: string; email?: string }) => {
    setSelectedTemplates(templates)
    setShowTemplateSelection(false)
    setShowConfirmation(true)
  }

const handleConfirmSend = async () => {
    setIsSending(true)
    // Simulate sending documents
    setTimeout(() => {
      setIsSending(false)
      const methodText = notificationMethod === 'both' ? 'SMS and Email' : notificationMethod?.toUpperCase()
      alert(
        `Documents sent to ${selectedEmployees.size} employee(s) via ${methodText}`
      )
      onClose()
    }, 500)
  }

const handleCancelConfirmation = () => {
    setShowConfirmation(false)
    setNotificationMethod(null)
    setSelectedTemplates({})
  }

const handleBackFromTemplate = () => {
    setShowTemplateSelection(false)
    setShowNotificationMethod(true)
  }

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-card rounded-lg shadow-lg max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
        {/* Modal Header */}
        <div className="border-b border-border bg-card px-6 py-4 flex items-center justify-between flex-shrink-0">
          <h2 className="text-2xl font-semibold text-foreground">
            Send to Employees
          </h2>
          <button
            onClick={onClose}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
            <X className="h-6 w-6" />
          </button>
        </div>

{/* Search and Filters */}
        <div className="border-b border-border bg-muted/20 px-6 py-4 flex-shrink-0 space-y-4">
          {/* Search Bar */}
          <div className="flex items-center gap-2 rounded-lg border border-border bg-background px-4 py-2">
            <Search className="h-5 w-5 text-muted-foreground" />
            <Input
              type="text"
              placeholder="Search by name or email..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="border-0 bg-transparent p-0 text-foreground placeholder:text-muted-foreground focus-visible:ring-0"
            />
          </div>

{/* All Filters */}
          <div className="flex gap-3 flex-wrap">
            {/* Department Filter */}
            <div className="relative">
              <button
                onClick={() => setShowDepartmentDropdown(!showDepartmentDropdown)}
                className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-background hover:bg-muted transition-colors text-sm text-foreground"
              >
                Department {selectedDepartments.size > 0 && `(${selectedDepartments.size})`}
                <ChevronDown className="h-4 w-4" />
              </button>
              {showDepartmentDropdown && (
                <div className="absolute top-full left-0 mt-2 bg-background border border-border rounded-lg shadow-lg z-10 min-w-48">
                  {DEPARTMENTS.map((dept) => (
                    <button
                      key={dept}
                      onClick={() => toggleDepartment(dept)}
                      className="w-full text-left px-4 py-2 hover:bg-muted transition-colors flex items-center gap-2 text-sm"
                    >
                      <input
                        type="checkbox"
                        checked={selectedDepartments.has(dept)}
                        onChange={() => {}}
                        className="h-4 w-4 rounded border-border cursor-pointer accent-primary"
                      />
                      {dept}
                    </button>
                  ))}
                </div>
              )}
            </div>

{/* Unit Filter */}
            <div className="relative">
              <button
                onClick={() => setShowUnitDropdown(!showUnitDropdown)}
                className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-background hover:bg-muted transition-colors text-sm text-foreground"
              >
                Unit {selectedUnits.size > 0 && `(${selectedUnits.size})`}
                <ChevronDown className="h-4 w-4" />
              </button>
              {showUnitDropdown && (
                <div className="absolute top-full left-0 mt-2 bg-background border border-border rounded-lg shadow-lg z-10 min-w-48">
                  {UNITS.map((unit) => (
                    <button
                      key={unit}
                      onClick={() => toggleUnit(unit)}
                      className="w-full text-left px-4 py-2 hover:bg-muted transition-colors flex items-center gap-2 text-sm"
                    >
                      <input
                        type="checkbox"
                        checked={selectedUnits.has(unit)}
                        onChange={() => {}}
                        className="h-4 w-4 rounded border-border cursor-pointer accent-primary"
                      />
                      {unit}
                    </button>
                  ))}
                </div>
              )}
            </div>

{/* Position Filter */}
            <div className="relative">
              <button
                onClick={() => setShowPositionDropdown(!showPositionDropdown)}
                className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-background hover:bg-muted transition-colors text-sm text-foreground"
              >
                Position {selectedPositions.size > 0 && `(${selectedPositions.size})`}
                <ChevronDown className="h-4 w-4" />
              </button>
              {showPositionDropdown && (
                <div className="absolute top-full left-0 mt-2 bg-background border border-border rounded-lg shadow-lg z-10 min-w-56">
                  {POSITIONS.map((position) => (
                    <button
                      key={position}
                      onClick={() => togglePosition(position)}
                      className="w-full text-left px-4 py-2 hover:bg-muted transition-colors flex items-center gap-2 text-sm"
                    >
                      <input
                        type="checkbox"
                        checked={selectedPositions.has(position)}
                        onChange={() => {}}
                        className="h-4 w-4 rounded border-border cursor-pointer accent-primary"
                      />
                      {position}
                    </button>
                  ))}
                </div>
              )}
            </div>

{/* Job Level Filter */}
            <div className="relative">
              <button
                onClick={() => setShowJobLevelDropdown(!showJobLevelDropdown)}
                className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-background hover:bg-muted transition-colors text-sm text-foreground"
              >
                Job Level {selectedJobLevels.size > 0 && `(${selectedJobLevels.size})`}
                <ChevronDown className="h-4 w-4" />
              </button>
              {showJobLevelDropdown && (
                <div className="absolute top-full left-0 mt-2 bg-background border border-border rounded-lg shadow-lg z-10 min-w-48">
                  {JOB_LEVELS.map((level) => (
                    <button
                      key={level}
                      onClick={() => toggleJobLevel(level)}
                      className="w-full text-left px-4 py-2 hover:bg-muted transition-colors flex items-center gap-2 text-sm"
                    >
                      <input
                        type="checkbox"
                        checked={selectedJobLevels.has(level)}
                        onChange={() => {}}
                        className="h-4 w-4 rounded border-border cursor-pointer accent-primary"
                      />
                      {level}
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>

{/* Employee List */}
        <div className="flex-1 overflow-y-auto px-6 py-4">
          {/* Select All Header */}
          <div className="mb-4 flex items-center gap-3 p-3 rounded-lg bg-muted/30">
            <input
              type="checkbox"
              checked={
                selectedEmployees.size === filteredEmployees.length &&
                filteredEmployees.length > 0
              }
              onChange={toggleSelectAll}
              className="h-5 w-5 rounded border-border cursor-pointer accent-primary"
            />
            <span className="text-sm font-medium text-foreground flex-1">
              Select All ({filteredEmployees.length})
            </span>
            <span className="text-sm text-muted-foreground">
              {selectedEmployees.size} selected
            </span>
          </div>

{/* Employee Items */}
          <div className="space-y-2">
            {filteredEmployees.map((employee) => {
              const isSelected = selectedEmployees.has(employee.id)
              return (
                <div
                  key={employee.id}
                  onClick={() => toggleEmployeeSelection(employee.id)}
                  className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors border ${
                    isSelected
                      ? 'border-primary bg-primary/5'
                      : 'border-border hover:bg-muted/30'
                  }`}
                >
                  <input
                    type="checkbox"
                    checked={isSelected}
                    onChange={() => toggleEmployeeSelection(employee.id)}
                    className="h-5 w-5 rounded border-border cursor-pointer accent-primary"
                    onClick={(e) => e.stopPropagation()}
                  />
                  <div className="flex-1">
                    <p className="font-medium text-foreground">{employee.name}</p>
                    <p className="text-sm text-muted-foreground">
                      {employee.email} • {employee.phone} • {employee.position}
                    </p>
                    <p className="text-xs text-muted-foreground">
                      {employee.department} • {employee.unit} • {employee.jobLevel}
                    </p>
                  </div>
                  {isSelected && (
                    <Check className="h-5 w-5 text-primary flex-shrink-0" />
                  )}
                </div>
              )
            })}
          </div>

{filteredEmployees.length === 0 && (
            <div className="text-center py-8">
              <p className="text-muted-foreground">No employees found</p>
            </div>
          )}
        </div>

{/* Modal Footer */}
        <div className="border-t border-border bg-muted/20 px-6 py-4 flex justify-end gap-3 flex-shrink-0">
          <Button
            variant="outline"
            onClick={onClose}
            disabled={isSending}
            className="border-border text-foreground hover:bg-muted bg-transparent"
          >
            Cancel
          </Button>
          <Button
            onClick={handleSendClick}
            disabled={selectedEmployees.size === 0 || isSending}
            className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isSending ? 'Sending...' : `Send to ${selectedEmployees.size} Employee${selectedEmployees.size !== 1 ? 's' : ''}`}
          </Button>
        </div>

{/* Notification Template Modal */}
        {showTemplateSelection && notificationMethod && (
          <NotificationTemplateModal
            method={notificationMethod}
            onClose={handleBackFromTemplate}
            onConfirm={handleTemplateSelection}
          />
        )}

import { useState } from 'react'
import DocumentList from '@/components/document-list'
import ViewDocumentModal from '@/components/modals/view-document-modal'
import SendToEmployeeModal from '@/components/modals/send-to-employee-modal'

export default function Home() {
  const [viewingDoc, setViewingDoc] = useState<string | null>(null)
  const [showSendModal, setShowSendModal] = useState(false)

return (
    <main className="min-h-screen bg-background">
      <DocumentList
        onViewDocument={setViewingDoc}
        onSendClick={() => setShowSendModal(true)}
      />
      
      {viewingDoc && (
        <ViewDocumentModal
          documentTitle={viewingDoc}
          onClose={() => setViewingDoc(null)}
        />
      )}
      
      {showSendModal && (
        <SendToEmployeeModal onClose={() => setShowSendModal(false)} />
      )}
    </main>
  )
}
[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.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/modals/view-document-modal.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { X, Archive, Edit2, Eye, Save } from 'lucide-react'
import DocumentTemplate from '../document-template'

interface ViewDocumentModalProps {
  documentTitle: string
  onClose: () => void
}

export default function ViewDocumentModal({
  documentTitle,
  onClose,
}: ViewDocumentModalProps) {
  const [isEditMode, setIsEditMode] = useState(false)
  const [title, setTitle] = useState(documentTitle)
  const [content, setContent] = useState(
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.'
  )
  const [editTitle, setEditTitle] = useState(title)
  const [editContent, setEditContent] = useState(content)

const handleEdit = () => {
    setEditTitle(title)
    setEditContent(content)
    setIsEditMode(true)
  }

const handleSaveEdit = () => {
    setTitle(editTitle)
    setContent(editContent)
    setIsEditMode(false)
  }

const handleCancel = () => {
    setIsEditMode(false)
  }

const handleArchive = () => {
    alert(`"${title}" has been archived`)
    onClose()
  }

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-card rounded-lg shadow-lg max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
        {/* Modal Header */}
        <div className="sticky top-0 border-b border-border bg-card px-6 py-4 flex items-center justify-between flex-shrink-0">
          <h2 className="text-2xl font-semibold text-foreground">{title}</h2>
          <button
            onClick={onClose}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
            <X className="h-6 w-6" />
          </button>
        </div>

{/* Modal Content */}
        <div className="flex-1 overflow-y-auto">
          {isEditMode ? (
            // Edit Mode
            <div className="px-6 py-8 space-y-6">
              <div className="space-y-2">
                <label className="text-sm font-medium text-foreground">Document Title</label>
                <Input
                  value={editTitle}
                  onChange={(e) => setEditTitle(e.target.value)}
                  placeholder="Enter document title"
                  className="bg-background border-border text-foreground"
                />
              </div>

<div className="space-y-2">
                <label className="text-sm font-medium text-foreground">Document Content</label>
                <textarea
                  value={editContent}
                  onChange={(e) => setEditContent(e.target.value)}
                  placeholder="Enter document content"
                  className="w-full h-64 p-4 rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                />
              </div>