diff --git a/assets/images/backgrounds/undraw_wait-in-line_login.svg b/assets/images/backgrounds/undraw_wait-in-line_login.svg
new file mode 100644
index 0000000..913cdbe
--- /dev/null
+++ b/assets/images/backgrounds/undraw_wait-in-line_login.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="863.6556" height="506.4464" viewBox="0 0 863.6556 506.4464" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><g><path id="uuid-7eb24f19-d190-4a71-9df2-28d9546a7028-42" d="M452.30785,191.35387c5.73837-7.26895,14.14035-10.20018,18.76578-6.54749s3.72229,12.50487-2.0191,19.77563c-2.2536,2.93584-5.17752,5.28928-8.52713,6.86343l-24.70261,30.49178-14.0618-11.89722,25.84534-28.79637c.75421-3.6246,2.36569-7.01582,4.69958-9.88976h-.00006v-.00002Z" fill="#ffb6b6"/><path d="M361.27599,178.30789l36.04324,61.25302,43.63364-30.14142,17.55112,7.0011s-31.00739,67.48877-57.74359,63.09915c-26.73618-4.38962-79.93542-64.78058-73.82874-85.86995,6.10666-21.08936,34.34436-15.34189,34.34436-15.34189h-.00003v-.00002Z" fill="#635bff"/></g><rect x="456.29146" y="161.4034" width="21" height="49" transform="translate(-33.53914 139.82052) rotate(-16.45294)" fill="#635bff"/><polygon points="356.75167 179.83328 357.1824 151.10986 339.46951 140.0683 320.20886 163.62825 356.75167 179.83328" fill="#ffb6b6"/><polygon points="356.75167 179.83328 357.89816 151.82561 339.46951 140.0683 345.73065 174.72913 356.75167 179.83328" isolation="isolate" opacity=".1"/><circle cx="347.26592" cy="122.47031" r="31.50162" fill="#ffb6b6"/><path d="M399.76996,369.76641l-5.54999,37.72998-2.78998,19-11.62,79.06c-14.66003-.46002-29.13-1.12-43.38-1.95001l2.07001-48.14001,1.25-28.96997,.81995-19,.51001-11.96002-7.46997-28.52997s-2.46002-4.57001-4.96002-10.66003c-.44-1.07996-.89001-2.20996-1.32001-3.37-3.09998-8.28998-5.56-18.15997-2.46997-23.32001,.14996-.23999,.29999-.46997,.46997-.69,1.40002-1.81,5.03003-3.15997,9.96002-4.15997,3.01001-.62,6.52002-1.09998,10.29999-1.46997,11.44-1.13,25.41003-1.30005,36.10004-1.19,9.66998,.07996,16.64996,.37994,16.64996,.37994l.10004,3.19,.00995,.31,.07001,2.42004,.17004,5.77997,.42999,14.28003,.44,14.51001,.20996,6.75Z" fill="#2f2e41"/><path d="M399.56,363.01641l-15.57001,31.22998-9.85004,13.25-14.10999,19-21.52997,28.96997-34.14001,45.95001c-16.41998-1.27997-32.52002-2.81-48.23004-4.54999l41.79004-70.37,11.27997-19,10.89001-18.33002,6.91998-28.66998s0-1.53003,.11005-3.97998c.04999-1.03003,.12-2.23004,.20996-3.54004,.61005-8.75,2.46002-22.70001,7.96002-28.16998,.73999-.75,1.54999-1.33002,2.42999-1.72998,1.65002-.73999,4.40002-.56,7.87,.26001,8.58002,2.04999,21.53998,8.08997,33.17999,14.08997,8.04999,4.16003,15.46002,8.28998,20.35004,11.08002l.44,14.51001Z" fill="#2f2e41"/><path d="M324.2586,157.55148l35.78674,17.17764s37.93396,112.37042,37.93396,118.09628,10.73602,9.30457,4.2944,15.74619,11.98962,11.89697,2.05826,17.04239c-9.93134,5.14539-71.88467,33.2901-78.77359,30.75208-19-7,.80515-32.72174,.80515-32.72174,0,0-14.27243-11.49402-12.12524-17.21991,2.14722-5.72589-12.88324-115.23334-12.88324-115.23334l22.90353-33.63956,.00003-.00002v-.00002Z" fill="#635bff"/><path d="M349.91656,129.79185l7.90643,4.42403s-4.84906-14.34099-1.30984-20.66613,1.4761-10.80177,1.4761-10.80177c0,0,12.62399,4.1568,15.94858-1.04261s4.42404-7.90643-6.40405-12.30416c-10.82806-4.39773-6.75439-1.28776-6.75439-1.28776,0,0-9.2468-3.51292-7.20996-1.95794,2.03683,1.55499-7.6655-2.62812-6.29883-.61758s-6.0842-1.74331-4.71756,.26723c1.36667,2.01054-17.26263,4.87536-13.4299,6.18941,3.83276,1.31406-15.70764,2.83852-15.12061,18.11692s-10.05368,19.61217-2.20148,24.05293,18.81177,23.44669,18.81177,23.44669l9.24268-6.28268s-2.77759-24.56764,10.06104-21.53658h.00003v.00002Z" fill="#2f2e41"/><g><path id="uuid-788a1427-1d14-4107-8598-91cdf159bec2-43" d="M282.80825,293.49045c9.18427-1.18973,16.01501-6.89294,15.2569-12.73776-.75812-5.84479-8.81714-9.61691-18.00452-8.42554-3.67651,.42557-7.19766,1.7254-10.26883,3.79077l-38.85049,5.53238,2.9848,18.17606,37.98282-7.38367c3.49731,1.21469,7.23471,1.57397,10.89932,1.04773v.00003Z" fill="#a0616a"/><path d="M164.03719,213.73125l10.65633,79.32826s2.9312,17.06137,29.61266,14.54916,61.74506-12.85992,61.74506-12.85992l-2.28174-18.52408-29.80118,3.22833s-13.91116-3.37491-16.67282-1.09891-1.49319,4.94052-4.2244,1.62653-1.35977-5.3717-3.75104-2.47351-2.87692,7.93588-4.3092,1.69644c-1.43227-6.23947-4.09679-4.97098-4.09679-4.97098l-1.51614-58.10919s-8.00505-27.71945-22.6266-18.45168-12.7341,16.05956-12.7341,16.05956h-.00003v-.00002Z" fill="#e6e6e6"/></g><rect x="157.96699" y="150.4398" width="52.77629" height="77.98285" fill="#2f2e41"/><polygon points="169.81358 204.64456 171.6618 182.30898 196.23675 182.30898 201.68464 205.97305 169.81358 204.64456" fill="#a0616a"/><polygon points="169.81358 204.64456 171.6618 182.30898 196.23675 182.30898 201.68464 205.97305 169.81358 204.64456" isolation="isolate" opacity=".1"/><circle cx="187.81917" cy="162.5531" r="26.86263" transform="translate(-2.72025 321.90893) rotate(-80.78252)" fill="#a0616a"/><path d="M194.59528,134.29184s0-11.02788-10.24017-8.66476-13.39101,6.30164-13.39101,6.30164c0,0-3.93854,6.30164-10.24017,7.08936-6.30164,.7877-11.81558,18.90492-11.02788,22.84346s4.72623,14.1787-.7877,18.90494c-5.51395,4.72623-13.39101,11.81558-11.02788,18.90494,2.36311,7.08936,9.45247,25.20657,9.45247,25.20657,0,0-19.77327,2.89032-18.15753,15.23001,0,0,9.49278-7.35295,22.09607-7.35295s11.02788-22.86517,11.02788-22.86517c0,0,.7877-14.157,3.15082-18.09552s-.7877-25.99429,11.02788-37.80988,18.11723-19.69264,18.11723-19.69264v0Z" fill="#2f2e41"/><path d="M191.44447,131.92873s14.96642,3.15082,20.48036,18.11723,2.72906,17.75128,2.72906,17.75128c0,0,1.21912,9.0121,7.90979,12.17223s1.17673,16.55112,1.17673,16.55112c0,0,1.57541,13.39101,22.84348,18.11723,21.26804,4.72623-26.67056,40.96936-26.67056,40.96936,0,0,3.44666-17.10567-18.60912-17.89339-22.05576-.7877,4.31898-41.19322,4.31898-41.19322l2.36313-25.99429s-4.72623-29.93282-18.90494-33.87134c-14.1787-3.93854,2.36311-4.72623,2.36311-4.72623l-.00003,.00002Z" fill="#2f2e41"/><path d="M229.57996,370.48638l-5.44,37.01001-2.78998,19-4.72998,32.14001-4.79004,32.57001c-5.66998-.82001-11.26996-1.67004-16.79999-2.55005-9.5-1.50995-18.79999-3.09998-27.90002-4.77997l1.77002-41.33002,.69-16.04999,.82001-19,.47998-11.25-7.47998-28.53003s-15.42999-28.72998-8.27002-38.02997c.33002-.41998,.77002-.82001,1.33002-1.19,1.82001-1.22998,4.82001-2.21002,8.59003-2.97003,8.90997-1.81995,22.10999-2.47998,34.13995-2.64996,15.44-.22003,28.94,.37,28.94,.37l.08002,2.34998,.15002,5.10004,1.20996,39.78998Z" fill="#2f2e41"/><path d="M229.57996,370.48638l-5.44,37.01001-2.78998,19-4.72998,32.14001-21.59003,30.01996c-9.5-1.50995-18.79999-3.09998-27.90002-4.77997-6.68994-1.22998-13.25995-2.51001-19.72998-3.83002l21.5-37.5,9.20001-16.04999,10.88-19,5.22998-9.12,4.54999-7.94,3.33002-14.79999,2.56-11.35004,.59003-2.62s-.06-4.12,.32996-9.64996c.60004-8.38,2.25-20.02002,6.79004-25.49005,.88-1.07996,1.88-1.90997,3.01001-2.43994,2.35999-1.11005,7.01996-.35004,12.84998,1.50995l.15002,5.10004,1.20996,39.78998Z" fill="#2f2e41"/><path d="M203.45139,204.78999l-.65553-.18526-32.26826-9.11929-25.76646,35.07101,17.17764,73.00494-6.44162,29.34515s52.24866-13.59897,73.00497-2.14722c0,0,1.43146-6.52615,0-9.70471s-3.57867-16.40555-1.43146-22.31741-4.2944-33.82553-4.2944-33.82553c0,0,2.14722-18.60912-7.15735-27.91367-9.30457-9.30457-12.1675-32.20808-12.1675-32.20808l-.00003,.00002v.00005Z" fill="#e6e6e6"/><path id="uuid-cd6b1305-cf39-49fc-bef1-740b2c9d0d0e-44" d="M194.49477,399.54056c2.31381,8.96732,8.81625,15.04218,14.52286,13.56873s8.45557-9.93631,6.13971-18.90652c-.87592-3.59592-2.60028-6.92978-5.02878-9.72263l-10.28355-37.87106-17.66891,5.20459,12.01364,36.78159c-.77391,3.62045-.66933,7.37363,.30504,10.94534v-.00003Z" fill="#a0616a"/><path d="M199.18043,237.02419s-10.00787-27.04489-20.97638-25.28409-20.96851,18.7608-20.96851,18.7608l7.92912,96.20671,21.77953,54.90134,23.10237-9.10803-12-54.86758,1.13387-80.60916v.00002Z" fill="#e6e6e6"/><path d="M699.54999,69.99639V484.62639c-.33002,.07001-.66003,.13-1,.17999-5.07001,.91998-10.21002,1.79999-15.41003,2.65997-6.17999,1.02002-12.44995,2.01001-18.79999,2.96002-5.27997,.78003-10.60999,1.53998-16,2.27002-15.69,2.14996-31.82001,4.06-48.33997,5.71997-5.29004,.54004-10.63,1.04999-16,1.53003-46.95001,4.21997-96.85004,6.5-148.59003,6.5-7.33002,0-14.60999-.04999-21.85999-.14001-.34003,0-.67004,0-1-.01001V69.99639h287Z" fill="#f2f2f2" isolation="isolate" opacity=".7"/><path d="M698.54999,206.78637v1.23004l.13-.26001c-.01001-.32001-.06-.64001-.13-.97003Zm-286,130.64001l-1-.81v89.88h1v79.79999c.32996,.01001,.65997,.01001,1,.01001v-229.5c-.33002,.17999-.66003,.34998-1,.52002v60.09998Zm-1-268.42999V506.27636c.32996,.01001,.65997,.02002,1,.02002,.32996,.01001,.65997,.01001,1,.01001V70.99639h285V484.80638c.33997-.04999,.66998-.10999,1-.17999,.32996-.04999,.66998-.10999,1-.17999V68.99639H411.54999Z" fill="#3f3d56"/><circle cx="437.04656" cy="364.50092" r="19" fill="#3f3d56"/><g><path id="uuid-340fa4d6-17c0-4cd5-bee8-12f32296eb37-45" d="M434.58685,359.23642c6.8204,6.26486,15.58142,7.82388,19.56769,3.48267s1.68811-12.93744-5.13556-19.20361c-2.69144-2.54047-5.95215-4.39944-9.50931-5.42139l-29.23358-26.17947-11.99286,13.98032,30.09241,24.32407c1.32056,3.45874,3.45038,6.55081,6.21124,9.01743h-.00003Z" fill="#ffb6b6"/><path d="M350.09387,220.33192s-23.11182-17.24606-31.35663-9.8008-7.38541,27.14961-7.38541,27.14961l58.99832,76.40547,48.14508,34.21338,14.4278-20.21173-39.92145-39.50607-42.90768-68.24991-.00003,.00002v.00003Z" fill="#635bff"/></g><path d="M600,392.49639v105.91998c-5.29004,.54004-10.63,1.04999-16,1.53003v-107.45001h16Z" fill="#3f3d56"/><path d="M16,392.49639v48.09998c-5.59003-2.46997-10.93005-5.00995-16-7.59998v-40.5H16Z" fill="#3f3d56"/><rect x="10.99539" y="407.49805" width="582.99999" height="19" fill="#635bff"/><path d="M723.18209,126.67004s-10.66663,6.25552-7.16833,12.44181c3.49823,6.18629,8.37512,14.61276,5.06659,17.26659s-8.77094,14.35461-8.77094,14.35461c0,0-23.31525-3.25642-21.1264,14.8546s13.14197,20.58018,3.75385,28.54768,9.75708,17.49655,9.75708,17.49655c0,0,13.21704-4.11877,16.23242-16.78452s-2.68805,9.68456-.77521,11.28712,9.34009,12.16576,14.59564-1.8786,.05133-19.48965,6.99573-27.77847c6.9444-8.28883,11.66577-21.6956,11.45892-24.03918s7.9436-23.72893-4.60162-32.06908-25.41779-13.69911-25.41779-13.69911h.00006Z" fill="#2f2e41"/><g><path id="uuid-a9d6e0e2-9081-4547-a7f7-3829edb971db-46" d="M632.64181,324.17535c-5.34741,6.02509-12.79071,8.14978-16.62451,4.74603-3.83386-3.40375-2.60614-11.04593,2.74396-17.07242,2.10413-2.43665,4.76123-4.33398,7.7489-5.53323l22.97955-25.24237,11.61566,11.03613-23.88702,23.7128c-.83655,3.10992-2.40582,5.97421-4.5766,8.35306h.00006Z" fill="#ffb6b6"/><path d="M699.83791,205.40999s13.93671-12.80269,19.81653-8.49271,6.63483,17.23132,6.63483,17.23132l-33.41388,53.82167-48.19244,40.6203-10.7691-12.23157,42.47015-43.52635,23.45392-47.42264v-.00003Z" fill="#3f3d56"/></g><polygon points="728.08151 176.40269 720.53176 203.23746 761.96841 203.23746 748.32369 170.17296 728.08151 176.40269" fill="#ffb6b6"/><polygon points="728.08151 176.40269 720.53176 203.23746 761.96841 203.23746 748.32369 170.17296 728.08151 176.40269" isolation="isolate" opacity=".1"/><polygon points="749.09292 264.95834 773.39028 322.35718 691.16372 318.29639 696.7524 264.95834 749.09292 264.95834" fill="#ffb6b6"/><polygon points="725.3243 189.49797 759.61056 188.06937 782.46804 228.07001 762.46774 292.35672 692.46664 299.49969 700.04659 237.50093 703.89541 202.35532 725.3243 189.49797" fill="#3f3d56"/><path d="M782.46997,376.20641c-1.65002,7.98999-3.44,18.94-5.19,30.81-.90997,6.17999-1.81,12.60999-2.66998,19-2.22003,16.38995-4.20001,32.51996-5.51001,43.5-10.88,2.82001-22.19,5.50995-33.90002,8.04999l-6.04999-51.54999-2.22998-19-2.31-19.66003-1.04004,19.66003-1.00995,19-2.90002,54.78998c-6.27002,1.26001-12.64001,2.46997-19.10999,3.64001-.33002,.07001-.67004,.13-1,.17999-.33002,.07001-.66003,.13-1,.17999-5.07001,.91998-10.21002,1.79999-15.41003,2.65997l-.85999-61.44995-.27002-19-.96997-68.94,8.45001-27.92004,2.54999-.22998,6.51001-.58997,1-.09003,1-.09998,64.76001-5.88,2.15997-.20001s1.53998,3.01001,3.65997,8.02002c.18005,.41998,.37006,.85999,.56006,1.31,1.82996,4.39996,4.00995,10.10999,6,16.56,2.62994,8.47998,4.93994,18.23999,5.70996,27.94995,.52002,6.59003,.34003,13.15002-.92999,19.30005Z" fill="#2f2e41"/><g><path id="uuid-de836ca6-962e-4f27-b85c-b36b0bd5804b-47" d="M784.9988,350.1416c-.60242,8.03326-5.23566,14.23407-10.34796,13.84988-5.11237-.38419-8.76703-7.20724-8.16333-15.24329,.19708-3.21338,1.16089-6.33282,2.81073-9.09735l2.98218-34.00507,15.92773,1.73959-4.63092,33.33826c1.21924,2.98074,1.70667,6.21017,1.42157,9.41797Z" fill="#ffb6b6"/><path d="M766.4775,214.94733s3.32751-18.62975,10.61658-18.7646,15.72009,9.686,15.72009,9.686l6.03705,63.062-13.71875,61.51678-15.97882-3.20355,7.40588-60.36069-10.08197-51.93596-.00006,.00003v-.00002Z" fill="#3f3d56"/></g><circle cx="737.92617" cy="157.28004" r="24.95403" fill="#ffb6b6"/><path d="M728.3605,129.41473s-4.159,11.6452,2.49542,14.14061,15.8042,5.8226,14.97241,9.98161c-.83179,4.159,2.49542,16.63602,2.49542,16.63602,0,0-19.9632,12.47701-6.65442,24.95403,13.30884,12.47701,23.29041,7.33557,21.21094,19.472-2.07953,12.13643,18.71552,7.14563,18.71552,7.14563,0,0,7.48621-11.6452,1.66357-23.29042-5.82257-11.64522,4.159,9.14981,6.65442,9.14981s14.97241,3.32719,9.98163-10.81342-12.47699-14.97241-12.47699-25.78581-4.99078-24.12222-6.65442-25.78583c-1.66357-1.6636-9.14978-23.29042-24.12219-21.62682s-28.28119,5.8226-28.28119,5.8226h-.00012v-.00002Z" fill="#2f2e41"/><rect x="602.99537" y="291.4981" width="21" height="49" transform="translate(-64.37843 186.69816) rotate(-16.45294)" fill="#635bff"/><rect x="272.99538" y="251.49807" width="21" height="49" transform="translate(-66.56193 91.59513) rotate(-16.45294)" fill="#635bff"/><g><path d="M664.33997,392.01641v98.40997c-5.27997,.78003-10.60999,1.53998-16,2.27002v-100.67999h16Z" fill="#3f3d56"/><rect x="659.34115" y="407.01465" width="204.31445" height="19" fill="#635bff"/></g><circle cx="348.85635" cy="52.48704" r="24.07923" fill="#e6e6e6"/><circle cx="752.16348" cy="90.46663" r="24.07923" fill="#e6e6e6"/><path d="M355.44265,58.62005c-1.28992-.06689-2.58002-.09656-3.87012-.10669,.85614-4.81653,1.71222-9.63318,2.56836-14.44977,.19666-1.10638-.13043-2.2276-1.14886-2.82324-.97137-.56818-2.22626-.37732-3.0296,.39093-2.37701,2.27332-4.75409,4.54663-7.13116,6.81995-.97595,.93335-.9397,2.59576,0,3.53552,.9751,.97504,2.55682,.93604,3.53552,0,.52539-.50244,1.05072-1.00488,1.57611-1.50732l-1.44763,8.14417c-1.40973,.07031-2.81873,.16205-4.22522,.30023-1.34369,.13202-2.5,1.0545-2.5,2.5,0,1.38,1.14465,2.46985,2.5,2.5,2.07721,.0462,4.15442,.09241,6.23169,.13867,.51715,.01154,1.08624-.19714,1.54535-.54254,1.79822-.01703,3.59717,.00684,5.39557,.1001,1.34973,.07001,2.5-1.19916,2.5-2.5,0-1.41205-1.14624-2.42981-2.5-2.5h0Z" fill="#fff"/><g><circle cx="543.06692" cy="24.07923" r="24.07923" fill="#635bff"/><path d="M549.65322,30.21224c-1.28992-.06689-2.58002-.09656-3.87012-.10669,.85614-4.81653,1.71222-9.63318,2.56836-14.44977,.19666-1.10638-.13043-2.2276-1.14886-2.82324-.97137-.56818-2.22626-.37732-3.0296,.39093-2.37701,2.27332-4.75409,4.54663-7.13116,6.81995-.97595,.93335-.9397,2.59576,0,3.53552,.9751,.97504,2.55682,.93604,3.53552,0,.52539-.50244,1.05072-1.00488,1.57611-1.50732l-1.44763,8.14417c-1.40973,.07031-2.81873,.16205-4.22522,.30023-1.34369,.13202-2.5,1.0545-2.5,2.5,0,1.38,1.14465,2.46985,2.5,2.5,2.07721,.0462,4.15442,.09241,6.23169,.13867,.51715,.01154,1.08624-.19714,1.54535-.54254,1.79822-.01703,3.59717,.00684,5.39557,.1001,1.34973,.07001,2.5-1.19916,2.5-2.5,0-1.41205-1.14624-2.42981-2.5-2.5h0Z" fill="#fff"/></g><g><circle cx="189.09579" cy="90.42105" r="24.07923" fill="#e6e6e6"/><path d="M196.41998,97.24639c-2.07001-1.07001-4.33002-1.64001-6.60004-1.72003,1.77002-2.84998,2.99005-6.04999,3.47003-9.34998,.27997-1.96997,.31-3.94-1.08002-5.52997-1.06-1.22003-2.58997-1.69-4.14001-1.84003-1.25995-.12-2.75995-.03998-3.94995,.35999-2.09003,.67999-2.78003,2.48004-2.73004,4.53003,.05005,1.95001,.35004,3.92999,1.66003,5.45996,.89996,1.05005,2.20996,1.74005,3.57996,1.85004-1.25995,2.59998-3.06995,4.89996-5.35999,6.83002-.95001,.78998-.91998,2.37994-.20001,3.27997,.78003,.97998,2.11005,1.26001,3.23004,.64001,2.94-1.64001,6.62-1.73004,9.59998-.19,1.20001,.62,2.71002,.31,3.41998-.90002,.66003-1.12,.31-2.79999-.89996-3.41998Zm-7.94-12.79999c0,.15997-.01001,.31-.03003,.46997-.00995,.09003-.01996,.17004-.01996,.22003-.01001,.04999-.01001,.08997-.02002,.09998v.01001c-.03998,.25-.09998,.48999-.14001,.72998-.39996-.10999-.82001-.12-1.22998,.02002-.03998,.01001-.06,.01001-.09003,.02002h-.02997c-.08002-.06-.14001-.11005,.02002-.01001-.09003-.10004-.14001-.16003-.17004-.17999l-.07001-.13c.01001,.03998,.01001,.07001,.01001,.07996-.01996-.02997-.04999-.12-.09998-.27997-.04999-.17999-.10004-.37-.14001-.56-.06-.29999-.07001-.69-.08002-1.13,.04004,0,.08002-.01001,.09003-.01001,.28998-.02002,.57001-.02997,.85999-.02997,.19,0,.38,.01996,.57001,.02997,.04999,.02002,.37,.09003,.48999,.12,.02002,.02002,.04999,.04004,.07001,.04999,.02002,.03003,.03003,.05005,.06,.08002l-.04999,.40002Z" fill="#fff"/></g><path d="M755.51996,90.14641c1.67999-1.29004,3.01001-3.19,2.87-5.39001-.26001-4.06-4.23999-5.91003-7.76001-6.59003-1.32996-.26001-2.69995,.37-3.07996,1.73999-.33002,1.23004,.41998,2.82001,1.75,3.08002,.57001,.10999,1.14001,.23999,1.70996,.41003,.29004,.07996,.58002,.17999,.86005,.29999,.07996,.03998,.37,.16998,.41998,.20001,.22998,.12,.46997,.25995,.69,.41998,.02002,.02997,.14001,.14001,.21997,.21997-.17999-.13995,.16003,.39001,.16003,.26001,.01996,.04999,.02997,.09003,.03998,.13v.09003c0,.00995-.06,.20996-.03998,.20996-.16003,.26001-.22003,.38-.32001,.48004-.42999,.47998-.72998,.65997-1.35999,.95996-1.46002,.71002-3.07001,1.09003-4.53003,1.83002-2.53998,1.29999-.77002,5.34998,1.92999,4.57001,.13-.03003,.25-.07001,.38-.10004,.07001-.00995,.19-.02997,.27002-.02997,.16998,0,.33002,0,.48999,.01001h.06c.33002,.07001,.66003,.14996,.97003,.27997,.03998,.02002,.09998,.04999,.14996,.09003,.14001,.08002,.29004,.16998,.42999,.25l.16003,.10999,.01001,.01001c.12994,.09998,.23999,.21997,.35999,.33002,.01996,.01996,.13,.14996,.19,.20996,.04999,.07001,.14996,.20001,.15997,.22003,.09003,.14996,.17999,.31,.26001,.46997,.01001,.03003,.02002,.08002,.03003,.13,.01996,.10004,.04999,.21002,.07996,.32001-.01001,.03998,.01001,.21002,.01001,.32001,0,.02997,0,.04999,.01001,.07001-.03003,.13-.07001,.26001-.09998,.39001-.01001,.02997-.01001,.03998-.01001,.04999-.09003,.16998-.19,.32996-.28003,.48999-.01001,.02002-.02997,.02997-.03998,.04999v.01001c-.10999,.10999-.20001,.21002-.31,.32001-.07001,.07001-.16003,.14001-.23999,.20996-.06,.03003-.22003,.15002-.26001,.17004-.14001,.07001-.27002,.14996-.41003,.21997h-.00995c-.01001,.01001-.02002,.01001-.03003,.01001-.19,.06-.37,.10999-.54999,.16003h-.03003c-.16998,0-.57001-.05005-.57001-.03003-.06-.01001-.13995-.03003-.19-.03998-.10999-.06-.31995-.17004-.31995-.17004-2.77002-1.65997-5.29004,2.67004-2.53003,4.32001,4.47998,2.67999,10.58002-.91998,10.85999-6,.13-2.31-.92999-4.33997-2.56-5.76996Z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/components/layout/full/vertical-header/ProfileDD.vue b/components/layout/full/vertical-header/ProfileDD.vue
index 24b7958..676fbf8 100644
--- a/components/layout/full/vertical-header/ProfileDD.vue
+++ b/components/layout/full/vertical-header/ProfileDD.vue
@@ -151,44 +151,8 @@ const sessionInfo = computed(() => {
             </div>
           </div>
         </div>
-        <v-divider></v-divider>
       </div>
 
-      <PerfectScrollbar style="height: calc(100vh - 240px); max-height: 240px">
-        <v-list class="py-0 theme-list" lines="two">
-          <v-list-item
-            v-for="item in profileDD"
-            :key="item.title"
-            class="py-4 px-8 custom-text-primary"
-            :to="item.href"
-          >
-            <template v-slot:prepend>
-              <v-avatar
-                size="48"
-                color="lightprimary"
-                class="mr-3"
-                rounded="md"
-              >
-                <img
-                  :src="item.avatar"
-                  width="24"
-                  height="24"
-                  :alt="item.avatar"
-                />
-              </v-avatar>
-            </template>
-            <div>
-              <h6 class="text-subtitle-1 font-weight-bold mb-2 custom-title">
-                {{ item.title }}
-              </h6>
-            </div>
-            <p class="text-subtitle-1 font-weight-regular textSecondary">
-              {{ item.subtitle }}
-            </p>
-          </v-list-item>
-        </v-list>
-      </PerfectScrollbar>
-
       <!-- **DIPERBAIKI: Logout buttons section dengan multiple options** -->
       <div class="pt-4 pb-6 px-8">
         <!-- Regular Logout Button -->
@@ -203,24 +167,7 @@ const sessionInfo = computed(() => {
           Logout
         </v-btn>
 
-        <!-- **TAMBAHAN: Full Logout Button** -->
-        <v-btn
-          color="error"
-          variant="outlined"
-          block
-          @click="fullLogout"
-          prepend-icon="mdi-logout-variant"
-          class="mb-2"
-        >
-          Full Logout
-        </v-btn>
-
-        <!-- **TAMBAHAN: Quick info text** -->
-        <div class="text-center mt-2">
-          <span class="text-caption textSecondary">
-            Full logout akan menghapus semua sesi dan data lokal
-          </span>
-        </div>
+      
       </div>
     </v-sheet>
   </v-menu>
diff --git a/components/layout/full/vertical-header/VerticalHeader.vue b/components/layout/full/vertical-header/VerticalHeader.vue
index 8c9314e..a7177e1 100644
--- a/components/layout/full/vertical-header/VerticalHeader.vue
+++ b/components/layout/full/vertical-header/VerticalHeader.vue
@@ -44,13 +44,13 @@ watch(priority, (newPriority) => {
         <!-- ---------------------------------------------- -->
         <!-- Search part -->
         <!-- ---------------------------------------------- -->
-        <Searchbar />
+        <!-- <Searchbar /> -->
 
         <!-- ---------------------------------------------- -->
         <!-- Mega menu -->
         <!-- ---------------------------------------------- -->
         <div class="hidden-sm-and-down">
-            <Navigations />
+            <!-- <Navigations /> -->
         </div>
 
         <v-spacer class="hidden-sm-and-down" />
@@ -85,7 +85,7 @@ watch(priority, (newPriority) => {
         <!-- Notification -->
         <!-- ---------------------------------------------- -->
         <div class="hidden-sm-and-down">
-            <NotificationDD />
+            <!-- <NotificationDD /> -->
         </div>
 
         <!-- ---------------------------------------------- -->
diff --git a/components/layout/full/vertical-sidebar/VerticalSidebar.vue b/components/layout/full/vertical-sidebar/VerticalSidebar.vue
index 3953071..4a11733 100644
--- a/components/layout/full/vertical-sidebar/VerticalSidebar.vue
+++ b/components/layout/full/vertical-sidebar/VerticalSidebar.vue
@@ -51,60 +51,7 @@ const sidebarMenu = shallowRef(sidebarItems);
 
 <template>
   <!-- Minisidebar Icons -->
-  <v-navigation-drawer
-    class="bg-light"
-    v-model="customizer.Sidebar_drawer"
-    top="0"
-    rail
-    rail-width="80"
-  >
-    <!-- <perfect-scrollbar class="miniscrollnavbar"> -->
-    <v-list-item class="px-0">
-      <!-- Toggle Sidebar Button -->
-      <div class="px-4 mb-3">
-        <v-btn
-          class="hidden-md-and-down my-2"
-          icon
-          rounded="md"
-          variant="plain"
-          @click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)"
-        >
-          <Icon icon="solar:hamburger-menu-line-duotone" height="25" />
-        </v-btn>
-      </div>
-
-      <div class="miniicons mt-lg-0 mt-4">
-        <!-- MiniSidebar Icons -->
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="miniicons-list px-4"
-            v-for="menu in MiniSideIcons"
-            :key="menu.icon"
-          >
-            <v-btn
-              rounded="md"
-              flat
-              icon
-              variant="plain"
-              @click="showData(menu.id)"
-              :class="{ 'bg-primary opacity-1': currentMenu === menu.id }"
-            >
-              <Icon :icon="'solar:' + menu.icon" width="25" />
-              <!-- Tooltip on Hover -->
-              <v-tooltip
-                activator="parent"
-                location="end"
-                class="custom-tooltip"
-                >{{ menu.tooltip }}</v-tooltip
-              >
-            </v-btn>
-          </div>
-        </div>
-      </div>
-    </v-list-item>
-    
-    <!-- </perfect-scrollbar> -->
-  </v-navigation-drawer>
+  
 
   <!-- LeftSidebar Items -->
   <v-navigation-drawer
diff --git a/components/layout/full/vertical-sidebar/sidebarItem.ts b/components/layout/full/vertical-sidebar/sidebarItem.ts
index 480d94b..fa8c080 100644
--- a/components/layout/full/vertical-sidebar/sidebarItem.ts
+++ b/components/layout/full/vertical-sidebar/sidebarItem.ts
@@ -21,209 +21,29 @@ const sidebarItem: menu[] = [
       id: 1,
       children: [
           {
-              title: 'Dashboard1',
+              title: 'Dashboard',
               icon: 'widget-add-line-duotone',
-              to: '/dashboards/dashboard1'
-          },
-          {
-              title: 'Dashboard2',
-              icon: 'chart-line-duotone',
-              to: '/dashboards/dashboard2'
-          },
-          {
-              title: 'Dashboard3',
-              icon: 'screencast-2-line-duotone',
-              to: '/dashboards/dashboard3'
-          },
-          {
-              title: 'Front Pages',
-              icon: 'home-angle-linear',
-              to: '/',
-              children: [
-                  {
-                      title: 'Homepage',
-                      to: '/front-page/homepage'
-                  },
-                  {
-                      title: 'About Us',
-                      to: '/front-page/about-us'
-                  },
-                  {
-                      title: 'Blog',
-                      to: '/front-page/blog/posts'
-                  },
-                  {
-                      title: 'Blog Details',
-                      to: '/front-page/blog/early-black-friday-amazon-deals-cheap-tvs-headphones'
-                  },
-                  {
-                      title: 'Contact Us',
-                      to: '/front-page/contact-us'
-                  },
-                  {
-                      title: 'Portfolio',
-                      to: '/front-page/portfolio'
-                  },
-                  {
-                      title: 'Pricing',
-                      to: '/front-page/pricing'
-                  }
-              ]
-          },
+              to: '/'
+          }
       ]
   },
 
   {
-      header: 'apps',
+      header: 'antrean',
       id: 1,
       children: [
           {
-              title: 'ECommerce',
+              title: 'Semua',
               icon: 'cart-3-line-duotone',
-              to: '/ecommerce/',
-              children: [
-                  {
-                      title: 'Shop',
-                      to: '/ecommerce/products'
-                  },
-                  {
-                      title: 'Detail',
-                      to: '/ecommerce/product/detail/1'
-                  },
-                  {
-                      title: 'List',
-                      to: '/ecommerce/productlist'
-                  },
-                  {
-                      title: 'Checkout',
-                      to: '/ecommerce/checkout'
-                  },
-                  {
-                      title: 'Add Product',
-                      to: '/ecommerce/add-product'
-                  },
-                  {
-                      title: 'Edit Product',
-                      to: '/ecommerce/edit-product'
-                  }
-              ]
+              to: '/antrean/all',
           },
           {
-              title: 'Blog',
+              title: 'Spesialis',
               icon: 'widget-4-line-duotone',
-              to: '/',
-              children: [
-                  {
-                      title: 'Blog Posts',
-                      to: '/apps/blog/posts'
-                  },
-                  {
-                      title: 'Blog Details',
-                      to: '/apps/blog/early-black-friday-amazon-deals-cheap-tvs-headphones'
-                  }
-              ]
-          },
-          {
-              title: 'User Profile',
-              icon: 'shield-user-line-duotone',
-              to: '/',
-              children: [
-                  {
-                      title: 'Profile',
-                      to: '/apps/user/profile'
-                  },
-                  {
-                      title: 'Followers',
-                      to: '/apps/user/profile/followers'
-                  },
-                  {
-                      title: 'Friends',
-                      to: '/apps/user/profile/friends'
-                  },
-                  {
-                      title: 'Gallery',
-                      to: '/apps/user/profile/gallery'
-                  }
-              ]
-          },
-          {
-              title: 'Invoice',
-              icon: 'bill-check-outline',
-              to: '/',
-              children: [
-                  {
-                      title: 'List',
-                      to: '/apps/invoice'
-                  },
-                  {
-                      title: 'Details',
-                      to: '/apps/invoice/details/102'
-                  },
-                  {
-                      title: 'Create',
-                      to: '/apps/invoice/create'
-                  },
-                  {
-                      title: 'Edit',
-                      to: '/apps/invoice/edit/102'
-                  }
-              ]
-          },
-          {
-              title: 'Calendar',
-              icon: 'calendar-mark-line-duotone',
-              to: '/apps/calendar'
-          },
-          {
-              title: 'Email',
-              icon: 'letter-linear',
-              to: '/apps/email'
-          },
-          {
-              title: 'Chats',
-              icon: 'chat-round-line-line-duotone',
-              to: '/apps/chats'
-          },
-          {
-              title: 'Notes',
-              icon: 'document-text-line-duotone',
-              to: '/apps/notes'
-          },
-          {
-              title: 'Kanban',
-              icon: 'airbuds-case-minimalistic-line-duotone',
-              to: '/apps/kanban'
-          },
-          {
-              title: 'Contact',
-              icon: 'iphone-line-duotone',
-              to: '/apps/contacts'
-          },
-          {
-              title: 'Tickets',
-              icon: 'ticker-star-outline',
-              to: '/apps/tickets'
-          },
+              to: '/antrean/list-spesialis'
+          }
       ]
-  },
-
-  {
-      header: 'Master',
-      id: 2,
-      children: [
-
-      ]
-  },
-
-  {
-      header: 'Forms',
-      id: 3,
-      children: [
-
-      ]
-  },
-
-
+  }
 ];
 
 export default sidebarItem;
diff --git a/components/pendaftaran/BiodataPasien.vue b/components/pendaftaran/BiodataPasien.vue
new file mode 100644
index 0000000..169d7e9
--- /dev/null
+++ b/components/pendaftaran/BiodataPasien.vue
@@ -0,0 +1,248 @@
+<script setup lang="ts">
+const formData = defineModel<{
+    noRekamMedis: string;
+    noKtp: string;
+    namaPasien: string;
+    jenisKelamin: string;
+    tanggalLahir: string;
+    umur: string;
+    alamat: string;
+    nomorTelepon: string[];
+}>({ required: true });
+
+const rules = {
+    required: (value: string) => !!value || 'Field ini wajib diisi'
+};
+
+// Modal state
+const showModal = ref(false);
+const newPhoneNumber = ref('');
+const editingIndex = ref<number | null>(null);
+
+// Initialize nomorTelepon as array if not already
+if (!Array.isArray(formData.value.nomorTelepon)) {
+    formData.value.nomorTelepon = [];
+}
+
+const openAddModal = () => {
+    newPhoneNumber.value = '';
+    editingIndex.value = null;
+    showModal.value = true;
+};
+
+const editPhoneNumber = (index: number) => {
+    const phone = formData.value.nomorTelepon[index];
+    // Remove +62 prefix for editing
+    newPhoneNumber.value = phone.startsWith('+62') ? phone.substring(3) : phone;
+    editingIndex.value = index;
+    showModal.value = true;
+};
+
+// Handle only numeric input
+const handlePhoneInput = (event: Event) => {
+    const input = event.target as HTMLInputElement;
+    const value = input.value;
+    
+    // Only allow numbers
+    const numericValue = value.replace(/\D/g, '');
+    newPhoneNumber.value = numericValue;
+};
+
+const savePhoneNumber = () => {
+    if (!newPhoneNumber.value.trim()) return;
+    
+    const fullPhoneNumber = `+62${newPhoneNumber.value}`;
+    
+    if (editingIndex.value !== null) {
+        formData.value.nomorTelepon[editingIndex.value] = fullPhoneNumber;
+    } else {
+        formData.value.nomorTelepon.push(fullPhoneNumber);
+    }
+    
+    showModal.value = false;
+    newPhoneNumber.value = '';
+    editingIndex.value = null;
+};
+
+const deletePhoneNumber = (index: number) => {
+    formData.value.nomorTelepon.splice(index, 1);
+};
+</script>
+
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <h5 class="text-h5 font-weight-bold">Data Biodata Pasien</h5>
+        </v-card-item>
+        <v-divider></v-divider>
+        <v-card-text>
+            <v-row>
+                <!-- No Rekam Medis -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">No Rekam Medis <span
+                            class="text-error">*</span></v-label>
+                    <v-text-field 
+                        v-model="formData.noRekamMedis" 
+                        placeholder="Masukan Nomor RM / Nama Pasien"
+                        variant="outlined" 
+                        density="comfortable" 
+                        :rules="[rules.required]"
+                        hide-details="auto"
+                    ></v-text-field>
+                </v-col>
+
+                <!-- No KTP -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">No Ktp</v-label>
+                    <v-text-field v-model="formData.noKtp" variant="outlined" density="comfortable"
+                     hide-details="auto" readonly bg-color="grey-lighten-3"></v-text-field>
+                </v-col>
+
+                <!-- Nama Pasien -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Nama Pasien</v-label>
+                    <v-text-field v-model="formData.namaPasien" variant="outlined" density="comfortable"
+                        hide-details="auto" readonly bg-color="grey-lighten-3"></v-text-field>
+                </v-col>
+
+                <!-- Jenis Kelamin -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Jenis Kelamin</v-label>
+                    <v-radio-group v-model="formData.jenisKelamin" inline hide-details="auto">
+                        <v-radio label="Laki-Laki" value="L" color="primary"></v-radio>
+                        <v-radio label="Perempuan" value="P" color="primary"></v-radio>
+                    </v-radio-group>
+                </v-col>
+
+                <!-- Tanggal Lahir -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Tanggal Lahir</v-label>
+                    <v-text-field v-model="formData.tanggalLahir" type="date" variant="outlined"
+                        density="comfortable" hide-details="auto" readonly
+                        bg-color="grey-lighten-3"></v-text-field>
+                </v-col>
+
+                <!-- Umur -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Umur</v-label>
+                    <v-text-field v-model="formData.umur" variant="outlined" density="comfortable"
+                        hide-details="auto" readonly bg-color="grey-lighten-3"></v-text-field>
+                </v-col>
+
+                <!-- Alamat -->
+                <v-col cols="12">
+                    <v-label class="mb-2 font-weight-medium">Alamat</v-label>
+                    <v-textarea v-model="formData.alamat" variant="outlined" rows="3" hide-details="auto"
+                        readonly bg-color="grey-lighten-3"></v-textarea>
+                </v-col>
+
+                <!-- Nomor Telepon -->
+                <v-col cols="12">
+                    <v-label class="mb-2 font-weight-medium">Nomor Telepon</v-label>
+                    
+                    <!-- Alert when no phone numbers -->
+                    <v-alert
+                        v-if="formData.nomorTelepon.length === 0"
+                        type="info"
+                        variant="tonal"
+                        class="mb-3"
+                        density="compact"
+                    >
+                        <div class="d-flex align-center">
+                            <span>No items</span>
+                        </div>
+                    </v-alert>
+
+                    <!-- List of phone numbers -->
+                    <v-list v-if="formData.nomorTelepon.length > 0" class="mb-3" density="compact">
+                        <v-list-item
+                            v-for="(phone, index) in formData.nomorTelepon"
+                            :key="index"
+                            class="px-4 mb-2"
+                            border
+                            @click="editPhoneNumber(index)"
+                            style="cursor: pointer;"
+                        >
+                            <template #default>
+                                <div class="d-flex align-center justify-space-between w-100">
+                                    <span>{{ phone }}</span>
+                                    <v-btn
+                                        icon
+                                        size="small"
+                                        variant="text"
+                                        color="error"
+                                        @click.stop="deletePhoneNumber(index)"
+                                    >
+                                        <v-icon>mdi-delete</v-icon>
+                                    </v-btn>
+                                </div>
+                            </template>
+                        </v-list-item>
+                    </v-list>
+
+                    <!-- Add Button -->
+                    <v-btn
+                        color="primary"
+                        variant="flat"
+                        prepend-icon="mdi-plus" 
+                        @click="openAddModal"
+                    >
+                        Tambah Nomor Telepon
+                    </v-btn>
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+
+    <!-- Modal for adding phone number -->
+    <v-dialog v-model="showModal" max-width="600px">
+        <v-card>
+            <v-card-title class="d-flex align-center justify-space-between pa-4">
+                <div class="d-flex align-center">
+                    <v-icon class="mr-3">mdi-package-variant</v-icon>
+                    <span class="text-h6">{{ editingIndex !== null ? 'Edit' : 'Tambah' }} Item  Data Telepon Pasien Operasi</span>
+                </div>
+                <v-btn
+                    icon
+                    variant="text"
+                    @click="showModal = false"
+                >
+                    <v-icon>mdi-close</v-icon>
+                </v-btn>
+            </v-card-title>
+            
+            <v-divider></v-divider>
+            
+            <v-card-text class="pa-6">
+                <v-label class="mb-2 font-weight-medium">Nomor Telepon</v-label>
+                <v-text-field
+                    v-model="newPhoneNumber"
+                    placeholder="Masukan nomor telepon lengkap"
+                    variant="outlined"
+                    density="comfortable"
+                    hide-details="auto"
+                    type="tel"
+                    @input="handlePhoneInput"
+                >
+                    <template #prepend-inner>
+                        <span class="text-medium-emphasis">+62</span>
+                    </template>
+                </v-text-field>
+            </v-card-text>
+            
+            <v-divider></v-divider>
+            
+            <v-card-actions class="pa-4 justify-end">
+                <v-btn
+                    color="primary"
+                    variant="flat"
+                    @click="savePhoneNumber"
+                    :disabled="!newPhoneNumber.trim()"
+                >
+                    <v-icon start>mdi-check</v-icon>
+                    Save
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
diff --git a/components/pendaftaran/MedisPasien.vue b/components/pendaftaran/MedisPasien.vue
new file mode 100644
index 0000000..f3500bf
--- /dev/null
+++ b/components/pendaftaran/MedisPasien.vue
@@ -0,0 +1,422 @@
+<script setup lang="ts">
+import diagnosisData from '~/data/mock/diagnosa.json';
+import tindakanData from '~/data/mock/tindakan.json';
+
+interface DiagnosisItem {
+    kodeDiagnosa: string;
+    diagnosa: string;
+    jenisDiagnosa: string;
+}
+
+interface TindakanItem {
+    kodeTindakan: string;
+    tindakan: string;
+    tindakanTambahan?: string;
+}
+
+const diagnosisItems = defineModel<DiagnosisItem[]>('diagnosisItems', { required: true });
+const tindakanItems = defineModel<TindakanItem[]>('tindakanItems', { required: true });
+
+// Modal state for diagnosis
+const showDiagnosisModal = ref(false);
+const diagnosisForm = ref<DiagnosisItem>({
+    kodeDiagnosa: '',
+    diagnosa: '',
+    jenisDiagnosa: 'utama'
+});
+const editingDiagnosisIndex = ref<number | null>(null);
+const diagnosisList = ref(diagnosisData);
+
+// Autocomplete options for diagnosis
+const diagnosisOptions = computed(() => {
+    return diagnosisList.value.map(d => ({
+        title: `${d.kode} - ${d.diagnosa}`,
+        value: d.kode,
+        diagnosa: d.diagnosa,
+        jenisDiagnosa: d.jenis_diagnosa
+    }));
+});
+
+// Modal state for tindakan
+const showTindakanModal = ref(false);
+const tindakanForm = ref<TindakanItem>({
+    kodeTindakan: '',
+    tindakan: '',
+    tindakanTambahan: ''
+});
+const editingTindakanIndex = ref<number | null>(null);
+const tindakanList = ref(tindakanData);
+
+// Autocomplete options for tindakan
+const tindakanOptions = computed(() => {
+    return tindakanList.value.map(t => ({
+        title: `${t.kode} - ${t.tindakan}`,
+        value: t.kode,
+        tindakan: t.tindakan,
+        tindakanTambahan: t.tindakan_tambahan
+    }));
+});
+
+// Initialize arrays if not already
+if (!Array.isArray(diagnosisItems.value)) {
+    diagnosisItems.value = [];
+}
+if (!Array.isArray(tindakanItems.value)) {
+    tindakanItems.value = [];
+}
+
+const openDiagnosisModal = () => {
+    diagnosisForm.value = {
+        kodeDiagnosa: '',
+        diagnosa: '',
+        jenisDiagnosa: 'utama'
+    };
+    editingDiagnosisIndex.value = null;
+    showDiagnosisModal.value = true;
+};
+
+const editDiagnosis = (index: number) => {
+    diagnosisForm.value = { ...diagnosisItems.value[index] };
+    editingDiagnosisIndex.value = index;
+    showDiagnosisModal.value = true;
+};
+
+const saveDiagnosis = () => {
+    if (!diagnosisForm.value.kodeDiagnosa.trim() || !diagnosisForm.value.diagnosa.trim()) return;
+    
+    if (editingDiagnosisIndex.value !== null) {
+        diagnosisItems.value[editingDiagnosisIndex.value] = { ...diagnosisForm.value };
+    } else {
+        diagnosisItems.value.push({ ...diagnosisForm.value });
+    }
+    
+    showDiagnosisModal.value = false;
+    diagnosisForm.value = {
+        kodeDiagnosa: '',
+        diagnosa: '',
+        jenisDiagnosa: 'utama'
+    };
+    editingDiagnosisIndex.value = null;
+};
+
+const deleteDiagnosis = (index: number) => {
+    diagnosisItems.value.splice(index, 1);
+};
+
+// Auto-fill diagnosis when code is selected
+const handleKodeDiagnosaChange = (kode: string) => {
+    const found = diagnosisList.value.find(d => d.kode === kode);
+    if (found) {
+        diagnosisForm.value.diagnosa = found.diagnosa;
+        diagnosisForm.value.jenisDiagnosa = found.jenis_diagnosa;
+    }
+};
+
+const openTindakanModal = () => {
+    tindakanForm.value = {
+        kodeTindakan: '',
+        tindakan: '',
+        tindakanTambahan: ''
+    };
+    editingTindakanIndex.value = null;
+    showTindakanModal.value = true;
+};
+
+const editTindakan = (index: number) => {
+    tindakanForm.value = { ...tindakanItems.value[index] };
+    editingTindakanIndex.value = index;
+    showTindakanModal.value = true;
+};
+
+const saveTindakan = () => {
+    if (!tindakanForm.value.kodeTindakan.trim() || !tindakanForm.value.tindakan.trim()) return;
+    
+    if (editingTindakanIndex.value !== null) {
+        tindakanItems.value[editingTindakanIndex.value] = { ...tindakanForm.value };
+    } else {
+        tindakanItems.value.push({ ...tindakanForm.value });
+    }
+    
+    showTindakanModal.value = false;
+    tindakanForm.value = {
+        kodeTindakan: '',
+        tindakan: '',
+        tindakanTambahan: ''
+    };
+    editingTindakanIndex.value = null;
+};
+
+const deleteTindakan = (index: number) => {
+    tindakanItems.value.splice(index, 1);
+};
+
+// Auto-fill tindakan when code is selected
+const handleKodeTindakanChange = (kode: string) => {
+    const found = tindakanList.value.find(t => t.kode === kode);
+    if (found) {
+        tindakanForm.value.tindakan = found.tindakan;
+        tindakanForm.value.tindakanTambahan = found.tindakan_tambahan || '';
+    }
+};
+</script>
+
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <h5 class="text-h5 font-weight-bold">Data Medis Pasien</h5>
+        </v-card-item>
+        <v-divider></v-divider>
+        <v-card-text>
+            <!-- Diagnosa -->
+            <div class="mb-6">
+                <h6 class="text-h6 font-weight-medium mb-3">Diagnosa</h6>
+                <v-card variant="outlined" class="mb-3">
+                    <v-alert
+                        v-if="diagnosisItems.length === 0"
+                        type="info"
+                        variant="tonal"
+                        density="compact"
+                    >
+                        <div class="d-flex align-center">
+                            <span>No items</span>
+                        </div>
+                    </v-alert>
+                    <v-list v-else density="compact">
+                        <v-list-item
+                            v-for="(item, index) in diagnosisItems"
+                            :key="index"
+                            class="px-4 mb-2"
+                            @click="editDiagnosis(index)"
+                            style="cursor: pointer;"
+                        >
+                            <template #default>
+                                <div class="d-flex align-center justify-space-between w-100">
+                                    <div>
+                                        <div class="font-weight-medium">{{ item.kodeDiagnosa }} - {{ item.diagnosa }}</div>
+                                        <div class="text-caption text-medium-emphasis">
+                                            {{ item.jenisDiagnosa === 'utama' ? 'Diagnosa Utama' : 'Diagnosa Tambahan' }}
+                                        </div>
+                                    </div>
+                                    <v-btn
+                                        icon
+                                        size="small"
+                                        variant="text"
+                                        color="error"
+                                        @click.stop="deleteDiagnosis(index)"
+                                    >
+                                        <v-icon>mdi-delete</v-icon>
+                                    </v-btn>
+                                </div>
+                            </template>
+                        </v-list-item>
+                    </v-list>
+                </v-card>
+                <v-btn color="primary" prepend-icon="mdi-plus" @click="openDiagnosisModal">
+                    Tambah Diagnosa
+                </v-btn>
+            </div>
+
+            <!-- Tindakan -->
+            <div>
+                <h6 class="text-h6 font-weight-medium mb-3">Tindakan</h6>
+                <v-card variant="outlined" class="mb-3">
+                    <v-alert
+                        v-if="tindakanItems.length === 0"
+                        type="info"
+                        variant="tonal"
+                        density="compact"
+                    >
+                        <div class="d-flex align-center">
+                            <span>No items</span>
+                        </div>
+                    </v-alert>
+                    <v-list v-else density="compact">
+                        <v-list-item
+                            v-for="(item, index) in tindakanItems"
+                            :key="index"
+                            class="px-4 mb-2"
+                            @click="editTindakan(index)"
+                            style="cursor: pointer;"
+                        >
+                            <template #default>
+                                <div class="d-flex align-center justify-space-between w-100">
+                                    <div>
+                                        <div class="font-weight-medium">{{ item.kodeTindakan }} - {{ item.tindakan }}</div>
+                                        <div v-if="item.tindakanTambahan" class="text-caption text-medium-emphasis">
+                                            {{ item.tindakanTambahan }}
+                                        </div>
+                                    </div>
+                                    <v-btn
+                                        icon
+                                        size="small"
+                                        variant="text"
+                                        color="error"
+                                        @click.stop="deleteTindakan(index)"
+                                    >
+                                        <v-icon>mdi-delete</v-icon>
+                                    </v-btn>
+                                </div>
+                            </template>
+                        </v-list-item>
+                    </v-list>
+                </v-card>
+                <v-btn color="primary" prepend-icon="mdi-plus" @click="openTindakanModal">
+                    Tambah Tindakan
+                </v-btn>
+            </div>
+        </v-card-text>
+    </v-card>
+
+    <!-- Modal for adding diagnosis -->
+    <v-dialog v-model="showDiagnosisModal" max-width="800px">
+        <v-card>
+            <v-card-title class="d-flex align-center justify-space-between pa-4">
+                <div class="d-flex align-center">
+                    <v-icon class="mr-3">mdi-package-variant</v-icon>
+                    <span class="text-h6">{{ editingDiagnosisIndex !== null ? 'Edit' : 'Tambah' }} Item Data Diagnosa Pasien Operasi</span>
+                </div>
+                <v-btn
+                    icon
+                    variant="text"
+                    @click="showDiagnosisModal = false"
+                >
+                    <v-icon>mdi-close</v-icon>
+                </v-btn>
+            </v-card-title>
+            
+            <v-divider></v-divider>
+            
+            <v-card-text class="pa-6">
+                <v-row>
+                    <!-- Kode Diagnosa -->
+                    <v-col cols="12" md="6">
+                        <v-label class="mb-2 font-weight-medium">Kode Diagnosa</v-label>
+                        <v-autocomplete
+                            v-model="diagnosisForm.kodeDiagnosa"
+                            :items="diagnosisOptions"
+                            placeholder="Kode ICD 10"
+                            variant="outlined"
+                            density="comfortable"
+                            hide-details="auto"
+                            @update:model-value="handleKodeDiagnosaChange"
+                        ></v-autocomplete>
+                    </v-col>
+
+                    <!-- Diagnosa -->
+                    <v-col cols="12" md="6">
+                        <v-label class="mb-2 font-weight-medium">Diagnosa</v-label>
+                        <v-text-field
+                            v-model="diagnosisForm.diagnosa"
+                            variant="outlined"
+                            density="comfortable"
+                            readonly
+                            bg-color="grey-lighten-3"
+                            hide-details="auto"
+                        ></v-text-field>
+                    </v-col>
+
+                    <!-- Jenis Diagnosa -->
+                    <v-col cols="12">
+                        <v-label class="mb-2 font-weight-medium">Jenis Diagnosa</v-label>
+                        <v-radio-group v-model="diagnosisForm.jenisDiagnosa" inline hide-details="auto" readonly>
+                            <v-radio label="Diagnosa Utama" value="utama" color="primary"></v-radio>
+                            <v-radio label="Diagnosa Tambahan" value="tambahan" color="primary"></v-radio>
+                        </v-radio-group>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+            
+            <v-divider></v-divider>
+            
+            <v-card-actions class="pa-4 justify-end">
+                <v-btn
+                    color="primary"
+                    variant="flat"
+                    @click="saveDiagnosis"
+                    :disabled="!diagnosisForm.kodeDiagnosa.trim() || !diagnosisForm.diagnosa.trim()"
+                >
+                    <v-icon start>mdi-check</v-icon>
+                    Save
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
+    <!-- Modal for adding tindakan -->
+    <v-dialog v-model="showTindakanModal" max-width="800px">
+        <v-card>
+            <v-card-title class="d-flex align-center justify-space-between pa-4">
+                <div class="d-flex align-center">
+                    <v-icon class="mr-3">mdi-package-variant</v-icon>
+                    <span class="text-h6">{{ editingTindakanIndex !== null ? 'Edit' : 'Tambah' }} Item Data Tindakan Pasien Operasi</span>
+                </div>
+                <v-btn
+                    icon
+                    variant="text"
+                    @click="showTindakanModal = false"
+                >
+                    <v-icon>mdi-close</v-icon>
+                </v-btn>
+            </v-card-title>
+            
+            <v-divider></v-divider>
+            
+            <v-card-text class="pa-6">
+                <v-row>
+                    <!-- Kode Tindakan -->
+                    <v-col cols="12" md="6">
+                        <v-label class="mb-2 font-weight-medium">Kode Tindakan</v-label>
+                        <v-autocomplete
+                            v-model="tindakanForm.kodeTindakan"
+                            :items="tindakanOptions"
+                            placeholder="Kode ICD 9"
+                            variant="outlined"
+                            density="comfortable"
+                            hide-details="auto"
+                            @update:model-value="handleKodeTindakanChange"
+                        ></v-autocomplete>
+                    </v-col>
+
+                    <!-- Tindakan -->
+                    <v-col cols="12" md="6">
+                        <v-label class="mb-2 font-weight-medium">Tindakan</v-label>
+                        <v-text-field
+                            v-model="tindakanForm.tindakan"
+                            variant="outlined"
+                            density="comfortable"
+                            readonly
+                            bg-color="grey-lighten-3"
+                            hide-details="auto"
+                        ></v-text-field>
+                    </v-col>
+
+                    <!-- Tindakan Tambahan -->
+                    <v-col cols="12">
+                        <v-label class="mb-2 font-weight-medium">Tindakan Tambahan</v-label>
+                        <v-text-field
+                            v-model="tindakanForm.tindakanTambahan"
+                            placeholder="Prosedur Tindakan Tambahan"
+                            variant="outlined"
+                            density="comfortable"
+                            hide-details="auto"
+                        ></v-text-field>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+            
+            <v-divider></v-divider>
+            
+            <v-card-actions class="pa-4 justify-end">
+                <v-btn
+                    color="primary"
+                    variant="flat"
+                    @click="saveTindakan"
+                    :disabled="!tindakanForm.kodeTindakan.trim() || !tindakanForm.tindakan.trim()"
+                >
+                    <v-icon start>mdi-check</v-icon>
+                    Save
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
diff --git a/components/pendaftaran/RencanaOperasi.vue b/components/pendaftaran/RencanaOperasi.vue
new file mode 100644
index 0000000..7da361a
--- /dev/null
+++ b/components/pendaftaran/RencanaOperasi.vue
@@ -0,0 +1,365 @@
+<script setup lang="ts">
+import dokterData from '~/data/mock/dokter.json';
+import spesialisData from '~/data/mock/spesialis.json';
+import subSpesialisData from '~/data/mock/subSpesialis.json';
+import kategoriOperasiData from '~/data/mock/kategoriOperasi.json';
+
+interface Dokter {
+    id: number;
+    nip: string;
+    nama: string;
+    satuan_kerja: string;
+}
+
+const rencanaOperasiData = defineModel<{
+    spesialis: number | null | undefined;
+    subSpesialis: number | null | undefined;
+    tanggalDaftar: string;
+    kategoriOperasi: number | null | undefined;
+    rencanaOperasi: string;
+    keterangan: string;
+}>('rencanaOperasiData', { required: true });
+
+const dokterPelaksanaItems = defineModel<Dokter[]>('dokterPelaksanaItems', { required: true });
+
+const rules = {
+    required: (value: any) => !!value || 'Field ini wajib diisi'
+};
+
+// Spesialis, Sub-spesialis, dan Kategori Operasi data
+const spesialisList = ref(spesialisData);
+const subSpesialisList = ref(subSpesialisData);
+const kategoriOperasiList = ref(kategoriOperasiData);
+
+// Autocomplete options
+const spesialisOptions = computed(() => {
+    return spesialisList.value.map(s => ({
+        title: s.spesialis,
+        value: s.id
+    }));
+});
+
+const subSpesialisOptions = computed(() => {
+    if (!rencanaOperasiData.value.spesialis) return [];
+    
+    return subSpesialisList.value
+        .filter(ss => ss.id_spesialis === rencanaOperasiData.value.spesialis)
+        .map(ss => ({
+            title: ss.subspesialis,
+            value: ss.id
+        }));
+});
+
+const kategoriOperasiOptions = computed(() => {
+    return kategoriOperasiList.value.map(k => ({
+        title: k.kategori,
+        value: k.id
+    }));
+});
+
+// Watch spesialis change to reset sub-spesialis
+watch(() => rencanaOperasiData.value.spesialis, () => {
+    rencanaOperasiData.value.subSpesialis = null;
+});
+
+// Modal state for dokter
+const showDokterModal = ref(false);
+const searchDokter = ref('');
+const selectedDokters = ref<number[]>([]);
+const dokterList = ref<Dokter[]>(dokterData);
+
+// Computed filtered dokter list
+const filteredDokterList = computed(() => {
+    if (!searchDokter.value) return dokterList.value;
+    
+    const search = searchDokter.value.toLowerCase();
+    return dokterList.value.filter(dokter => 
+        dokter.nama.toLowerCase().includes(search) ||
+        dokter.nip.includes(search) ||
+        dokter.satuan_kerja.toLowerCase().includes(search)
+    );
+});
+
+// Initialize dokterPelaksanaItems as array if not already
+if (!Array.isArray(dokterPelaksanaItems.value)) {
+    dokterPelaksanaItems.value = [];
+}
+
+const openDokterModal = () => {
+    // Pre-select already added doctors
+    selectedDokters.value = dokterPelaksanaItems.value.map(d => d.id);
+    searchDokter.value = '';
+    showDokterModal.value = true;
+};
+
+const saveDokterSelection = () => {
+    // Get selected doctor objects
+    const selected = dokterList.value.filter(d => selectedDokters.value.includes(d.id));
+    dokterPelaksanaItems.value = selected;
+    showDokterModal.value = false;
+};
+
+const deleteDokter = (index: number) => {
+    dokterPelaksanaItems.value.splice(index, 1);
+};
+
+// Toggle all selection
+const toggleAllDokters = () => {
+    if (selectedDokters.value.length === filteredDokterList.value.length) {
+        selectedDokters.value = [];
+    } else {
+        selectedDokters.value = filteredDokterList.value.map(d => d.id);
+    }
+};
+
+const isAllSelected = computed(() => {
+    return filteredDokterList.value.length > 0 && 
+           selectedDokters.value.length === filteredDokterList.value.length;
+});
+
+const toggleDokterSelection = (dokterId: number) => {
+    const index = selectedDokters.value.indexOf(dokterId);
+    if (index > -1) {
+        selectedDokters.value.splice(index, 1);
+    } else {
+        selectedDokters.value.push(dokterId);
+    }
+};
+</script>
+
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <h5 class="text-h5 font-weight-bold">Data Rencana Operasi</h5>
+        </v-card-item>
+        <v-divider></v-divider>
+        <v-card-text>
+            <v-row>
+                <!-- Spesialis -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Spesialis <span class="text-error">*</span></v-label>
+                    <v-autocomplete
+                        v-model="rencanaOperasiData.spesialis"
+                        :items="spesialisOptions"
+                        placeholder="Select an item..."
+                        variant="outlined"
+                        density="comfortable"
+                        :rules="[rules.required]"
+                        hide-details="auto"
+                    ></v-autocomplete>
+                </v-col>
+
+                <!-- Sub Spesialis -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Sub Spesialis <span class="text-error">*</span></v-label>
+                    <v-autocomplete
+                        v-model="rencanaOperasiData.subSpesialis"
+                        :items="subSpesialisOptions"
+                        placeholder="Select an item..."
+                        variant="outlined"
+                        density="comfortable"
+                        :rules="[rules.required]"
+                        hide-details="auto"
+                        :disabled="!rencanaOperasiData.spesialis"
+                    ></v-autocomplete>
+                </v-col>
+
+                <!-- Dokter Pelaksana -->
+                <v-col cols="12">
+                    <v-label class="mb-2 font-weight-medium">Dokter Pelaksana</v-label>
+                    <v-card variant="outlined" class="mb-3">
+                        <v-alert
+                            v-if="dokterPelaksanaItems.length === 0"
+                            type="info"
+                            variant="tonal"
+                            density="compact"
+                        >
+                            <div class="d-flex align-center">
+                                <span>No items</span>
+                            </div>
+                        </v-alert>
+                        <v-list v-else density="compact">
+                            <v-list-item
+                                v-for="(item, index) in dokterPelaksanaItems"
+                                :key="index"
+                                @click="openDokterModal"
+                                class="px-4 mb-2"
+                            >
+                                <template #default>
+                                    <div class="d-flex align-center justify-space-between w-100">
+                                        <div>
+                                            <div class="font-weight-medium">{{ item.nama }}</div>
+                                            <div class="text-caption text-medium-emphasis">
+                                                {{ item.nip }} - {{ item.satuan_kerja }}
+                                            </div>
+                                        </div>
+                                        <v-btn
+                                            icon
+                                            size="small"
+                                            variant="text"
+                                            color="error"
+                                            @click="deleteDokter(index)"
+                                        >
+                                            <v-icon>mdi-delete</v-icon>
+                                        </v-btn>
+                                    </div>
+                                </template>
+                            </v-list-item>
+                        </v-list>
+                    </v-card>
+                    <v-btn color="primary" prepend-icon="mdi-plus" @click="openDokterModal">
+                        Tambah Dokter Pelaksana
+                    </v-btn>
+                </v-col>
+
+                <!-- Tanggal Daftar -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Tanggal Daftar <span class="text-error">*</span></v-label>
+                    <v-text-field
+                        v-model="rencanaOperasiData.tanggalDaftar"
+                        type="datetime-local"
+                        variant="outlined"
+                        density="comfortable"
+                        :rules="[rules.required]"
+                        hide-details="auto"
+                    ></v-text-field>
+                </v-col>
+
+                <!-- Kategori Operasi -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Kategori Operasi <span class="text-error">*</span></v-label>
+                    <v-autocomplete
+                        v-model="rencanaOperasiData.kategoriOperasi"
+                        :items="kategoriOperasiOptions"
+                        placeholder="Select an item..."
+                        variant="outlined"
+                        density="comfortable"
+                        :rules="[rules.required]"
+                        hide-details="auto"
+                    ></v-autocomplete>
+                </v-col>
+
+                <!-- Rencana Operasi -->
+                <v-col cols="12">
+                    <v-label class="mb-2 font-weight-medium">Rencana Operasi</v-label>
+                    <v-textarea
+                        v-model="rencanaOperasiData.rencanaOperasi"
+                        variant="outlined"
+                        rows="5"
+                        hide-details="auto"
+                    ></v-textarea>
+                </v-col>
+
+                <!-- Keterangan -->
+                <v-col cols="12">
+                    <v-label class="mb-2 font-weight-medium">Keterangan</v-label>
+                    <v-textarea
+                        v-model="rencanaOperasiData.keterangan"
+                        variant="outlined"
+                        rows="3"
+                        hide-details="auto"
+                    ></v-textarea>
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+
+    <!-- Modal for selecting dokter -->
+    <v-dialog v-model="showDokterModal" max-width="900px">
+        <v-card>
+            <v-card-title class="d-flex align-center justify-space-between pa-4">
+                <div class="d-flex align-center">
+                    <v-icon class="mr-3">mdi-database</v-icon>
+                    <span class="text-h6">Select Item</span>
+                </div>
+                <v-btn
+                    icon
+                    variant="text"
+                    @click="showDokterModal = false"
+                >
+                    <v-icon>mdi-close</v-icon>
+                </v-btn>
+            </v-card-title>
+            
+            <v-divider></v-divider>
+            
+            <v-card-text class="pa-4">
+                <!-- Search Bar -->
+                <v-text-field
+                    v-model="searchDokter"
+                    placeholder="Search..."
+                    variant="outlined"
+                    density="comfortable"
+                    hide-details
+                    prepend-inner-icon="mdi-magnify"
+                    class="mb-4"
+                ></v-text-field>
+
+                <!-- Info Badge -->
+                <div class="text-caption text-medium-emphasis mb-3">
+                    1-{{ filteredDokterList.length }} of {{ dokterList.length }} Items
+                </div>
+
+                <!-- Data Table -->
+                <v-table density="compact" class="border">
+                    <thead>
+                        <tr>
+                            <th class="text-left">
+                                <v-checkbox
+                                    :model-value="isAllSelected"
+                                    @click="toggleAllDokters"
+                                    hide-details
+                                    density="compact"
+                                ></v-checkbox>
+                            </th>
+                            <th class="text-left">Display</th>
+                            <th class="text-left">Nip</th>
+                            <th class="text-left">Nama Lengkap</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr 
+                            v-for="dokter in filteredDokterList" 
+                            :key="dokter.id"
+                            @click="toggleDokterSelection(dokter.id)"
+                            class="cursor-pointer"
+                            style="cursor: pointer;"
+                        >
+                            <td @click.stop>
+                                <v-checkbox
+                                    v-model="selectedDokters"
+                                    :value="dokter.id"
+                                    hide-details
+                                    density="compact"
+                                ></v-checkbox>
+                            </td>
+                            <td>Doctor</td>
+                            <td>{{ dokter.nip }}</td>
+                            <td>{{ dokter.nama }}</td>
+                        </tr>
+                    </tbody>
+                </v-table>
+
+                <!-- Empty State -->
+                <div v-if="filteredDokterList.length === 0" class="text-center py-8">
+                    <v-icon size="large" class="mb-2 text-medium-emphasis">mdi-information-outline</v-icon>
+                    <p class="text-medium-emphasis">No results found</p>
+                </div>
+            </v-card-text>
+            
+            <v-divider></v-divider>
+            
+            <v-card-actions class="pa-4 justify-end">
+                <v-btn
+                    color="primary"
+                    variant="flat"
+                    @click="saveDokterSelection"
+                    :disabled="selectedDokters.length === 0"
+                >
+                    <v-icon start>mdi-check</v-icon>
+                    Save ({{ selectedDokters.length }})
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
diff --git a/components/pendaftaran/StatusPasienOperasi.vue b/components/pendaftaran/StatusPasienOperasi.vue
new file mode 100644
index 0000000..dc917c1
--- /dev/null
+++ b/components/pendaftaran/StatusPasienOperasi.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+const statusPasienData = defineModel<{
+    tanggalSelesai: string;
+    statusOperasi: string;
+    keteranganStatus: string;
+}>({ required: true });
+</script>
+
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <h5 class="text-h5 font-weight-bold">Data Status Pasien Operasi</h5>
+        </v-card-item>
+        <v-divider></v-divider>
+        <v-card-text>
+            <v-row>
+                <!-- Status Operasi -->
+                <v-col cols="12">
+                    <v-label class="mb-2 font-weight-medium">Status Operasi <span class="text-error">*</span></v-label>
+                    <v-row class="mt-2">
+                        <v-col cols="12" sm="6" md="3">
+                            <v-btn
+                                block
+                                size="large"
+                                :variant="statusPasienData.statusOperasi === 'Belum' ? 'flat' : 'outlined'"
+                                :color="statusPasienData.statusOperasi === 'Belum' ? 'primary' : 'default'"
+                                @click="statusPasienData.statusOperasi = 'Belum'"
+                            >
+                                <v-icon left class="mr-2">{{ statusPasienData.statusOperasi === 'Belum' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
+                                Belum
+                            </v-btn>
+                        </v-col>
+                        <v-col cols="12" sm="6" md="3">
+                            <v-btn
+                                block
+                                size="large"
+                                :variant="statusPasienData.statusOperasi === 'Selesai' ? 'flat' : 'outlined'"
+                                :color="statusPasienData.statusOperasi === 'Selesai' ? 'primary' : 'default'"
+                                @click="statusPasienData.statusOperasi = 'Selesai'"
+                            >
+                                <v-icon left class="mr-2">{{ statusPasienData.statusOperasi === 'Selesai' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
+                                Selesai
+                            </v-btn>
+                        </v-col>
+                        <v-col cols="12" sm="6" md="3">
+                            <v-btn
+                                block
+                                size="large"
+                                :variant="statusPasienData.statusOperasi === 'Tunda' ? 'flat' : 'outlined'"
+                                :color="statusPasienData.statusOperasi === 'Tunda' ? 'primary' : 'default'"
+                                @click="statusPasienData.statusOperasi = 'Tunda'"
+                            >
+                                <v-icon left class="mr-2">{{ statusPasienData.statusOperasi === 'Tunda' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
+                                Tunda
+                            </v-btn>
+                        </v-col>
+                        <v-col cols="12" sm="6" md="3">
+                            <v-btn
+                                block
+                                size="large"
+                                :variant="statusPasienData.statusOperasi === 'Batal' ? 'flat' : 'outlined'"
+                                :color="statusPasienData.statusOperasi === 'Batal' ? 'primary' : 'default'"
+                                @click="statusPasienData.statusOperasi = 'Batal'"
+                            >
+                                <v-icon left class="mr-2">{{ statusPasienData.statusOperasi === 'Batal' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
+                                Batal
+                            </v-btn>
+                        </v-col>
+                    </v-row>
+                </v-col>
+
+                <!-- Tanggal Selesai Operasi -->
+                <v-col cols="6">
+                    <v-label class="mb-2 font-weight-medium">Tanggal Selesai Operasi</v-label>
+                    <v-text-field
+                        v-model="statusPasienData.tanggalSelesai"
+                        type="date"
+                        variant="outlined"
+                        density="comfortable"
+                        hide-details="auto"
+                    ></v-text-field>
+                </v-col>
+
+                <!-- Keterangan Status Pasien -->
+                <v-col cols="12">
+                    <v-label class="mb-2 font-weight-medium">Keterangan Status Pasien</v-label>
+                    <v-textarea
+                        v-model="statusPasienData.keteranganStatus"
+                        variant="outlined"
+                        rows="5"
+                        placeholder="Keterangan status tunda / batal"
+                        hide-details="auto"
+                    ></v-textarea>
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
diff --git a/components/shared/BaseBreadcrumb.vue b/components/shared/BaseBreadcrumb.vue
index aa6499c..1f4d066 100644
--- a/components/shared/BaseBreadcrumb.vue
+++ b/components/shared/BaseBreadcrumb.vue
@@ -11,27 +11,19 @@ const props = defineProps({
 </script>
 
 <template>
-    <v-card elevation="10" class="mb-8">
         <div class="px-6 py-4">
             <div class="d-flex justify-space-between align-center">
                 <h5 class="text-h5">{{ title }}</h5>
-                <v-breadcrumbs :items="breadcrumbs" class="pa-0">
-                        <template v-slot:prepend>
-                            <router-link to="/" class="textSecondary lh-0">
-                                <Icon icon="solar:home-2-line-duotone" height="20"   />
-                            </router-link>
-                        </template>
-                        <template v-slot:divider>
-                            <div class="d-flex align-center textSecondary "></div>
-                        </template>
-                        <template v-slot:title="{ item }">
-                            <v-chip size="small" class="rounded-sm" color="primary" >{{ item.text }}</v-chip>
-                        </template>
-                    </v-breadcrumbs>
-                
+                <div class="d-flex align-center ga-2">
+                    <router-link to="/" class="textSecondary lh-0">
+                        <Icon icon="solar:home-2-line-duotone" height="20" />
+                    </router-link>
+                    <v-chip size="small" class="rounded-sm" color="primary">
+                        {{ breadcrumbs?.map(item => item.text).join(' / ') }}
+                    </v-chip>
+                </div>
             </div>
         </div>
-    </v-card>
 </template>
 
 <style lang="scss">
diff --git a/composables/useUserInfo.ts b/composables/useUserInfo.ts
index 6e6bec7..876ad3f 100644
--- a/composables/useUserInfo.ts
+++ b/composables/useUserInfo.ts
@@ -356,12 +356,24 @@ export const useUserInfo = (): UseUserInfoReturnType => {
         sessionStorage.clear();
       }
 
-      await signOut({
-        callbackUrl: `${defaultOptions.redirect}?reason=idle`,
-        redirect: true
-      });
+      try {
+        await signOut({
+          callbackUrl: `${defaultOptions.redirect}?reason=idle`,
+          redirect: true
+        });
+      } catch (csrfError) {
+        // Jika CSRF token error, tetap redirect ke login page
+        console.warn("CSRF token error during signOut, redirecting manually:", csrfError);
+        if (process.client) {
+          window.location.href = `${defaultOptions.redirect}?reason=idle`;
+        }
+      }
     } catch (error) {
       console.error("Logout failed:", error);
+      // Fallback redirect jika logout gagal
+      if (process.client) {
+        window.location.href = `${defaultOptions.redirect}?reason=error`;
+      }
       throw new Error("Logout failed. Please try again.");
     }
   };
diff --git a/config.ts b/config.ts
index df651f4..062e7ec 100644
--- a/config.ts
+++ b/config.ts
@@ -17,7 +17,7 @@ const config: ConfigProps = {
     mini_sidebar: false,
     setHorizontalLayout: false, // Horizontal layout
     setRTLLayout: false, // RTL layout
-    actTheme: 'ORANGE_THEME',
+    actTheme: 'BLUE_THEME',
     boxed: true,
     setBorderCard: false
 };
diff --git a/data/mock/antreanOperasi.json b/data/mock/antreanOperasi.json
new file mode 100644
index 0000000..345e1bd
--- /dev/null
+++ b/data/mock/antreanOperasi.json
@@ -0,0 +1,119 @@
+[
+  {
+    "id": 1,
+    "jenisKelamin": "L",
+    "namaPasien": "BINTANG ARJUNA",
+    "noKtp": "3573031612100001",
+    "noRekamMedis": "11621458",
+    "kodeSpesialis": "SP001",
+    "kodeSubSpesialis": "SUB001"
+  },
+  {
+    "id": 2,
+    "jenisKelamin": "P",
+    "namaPasien": "PINAR",
+    "noKtp": "3573044509740002",
+    "noRekamMedis": "11506867",
+    "kodeSpesialis": "SP002",
+    "kodeSubSpesialis": "SUB005"
+  },
+  {
+    "id": 3,
+    "jenisKelamin": "L",
+    "namaPasien": "SANTOSO",
+    "noKtp": "3514040104730003",
+    "noRekamMedis": "11582081",
+    "kodeSpesialis": "SP003",
+    "kodeSubSpesialis": "SUB008"
+  },
+  {
+    "id": 4,
+    "jenisKelamin": "L",
+    "namaPasien": "ARIF NOFIANTO",
+    "noKtp": "3507321911890004",
+    "noRekamMedis": "11585010",
+    "kodeSpesialis": "SP001",
+    "kodeSubSpesialis": "SUB002"
+  },
+  {
+    "id": 5,
+    "jenisKelamin": "P",
+    "namaPasien": "TUTIANI",
+    "noKtp": "3507304107550005",
+    "noRekamMedis": "11602936",
+    "kodeSpesialis": "SP002",
+    "kodeSubSpesialis": "SUB006"
+  },
+  {
+    "id": 6,
+    "jenisKelamin": "P",
+    "namaPasien": "WINARSI",
+    "noKtp": "3175085505780006",
+    "noRekamMedis": "11591972",
+    "kodeSpesialis": "SP005",
+    "kodeSubSpesialis": "SUB013"
+  },
+  {
+    "id": 7,
+    "jenisKelamin": "L",
+    "namaPasien": "MOHAMAD BARKAH",
+    "noKtp": "3506021701590007",
+    "noRekamMedis": "11578328",
+    "kodeSpesialis": "SP004",
+    "kodeSubSpesialis": "SUB011"
+  },
+  {
+    "id": 8,
+    "jenisKelamin": "P",
+    "namaPasien": "LAMINEM",
+    "noKtp": "3503074101710008",
+    "noRekamMedis": "11589921",
+    "kodeSpesialis": "SP003",
+    "kodeSubSpesialis": "SUB009"
+  },
+  {
+    "id": 9,
+    "jenisKelamin": "L",
+    "namaPasien": "YENIVER ABDI M",
+    "noKtp": "3507252806700009",
+    "noRekamMedis": "11614879",
+    "kodeSpesialis": "SP001",
+    "kodeSubSpesialis": "SUB003"
+  },
+  {
+    "id": 10,
+    "jenisKelamin": "P",
+    "namaPasien": "ENNY NAZARRO",
+    "noKtp": "3505136904850010",
+    "noRekamMedis": "11423790",
+    "kodeSpesialis": "SP005",
+    "kodeSubSpesialis": "SUB014"
+  },
+  {
+    "id": 11,
+    "jenisKelamin": "P",
+    "namaPasien": "IIN CAHYONO",
+    "noKtp": "3507155310740011",
+    "noRekamMedis": "11571803",
+    "kodeSpesialis": "SP002",
+    "kodeSubSpesialis": "SUB007"
+  },
+  {
+    "id": 12,
+    "jenisKelamin": "P",
+    "namaPasien": "ENY RISNANIANTI",
+    "noKtp": "3575017105550012",
+    "noRekamMedis": "11614674",
+    "kodeSpesialis": "SP004",
+    "kodeSubSpesialis": "SUB012"
+  },
+  {
+    "id": 13,
+    "jenisKelamin": "L",
+    "namaPasien": "MUHAMMAD NUR",
+    "noKtp": "3575030809990013",
+    "noRekamMedis": "11615541",
+    "kodeSpesialis": "SP005",
+    "kodeSubSpesialis": "SUB015"
+  }
+]
diff --git a/data/mock/diagnosa.json b/data/mock/diagnosa.json
new file mode 100644
index 0000000..857bcf4
--- /dev/null
+++ b/data/mock/diagnosa.json
@@ -0,0 +1,110 @@
+[
+  {
+    "id": 1,
+    "kode": "K35.8",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Acute appendicitis, other and unspecified"
+  },
+  {
+    "id": 2,
+    "kode": "K40.9",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Unilateral or unspecified inguinal hernia, without obstruction or gangrene"
+  },
+  {
+    "id": 3,
+    "kode": "K80.2",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Calculus of gallbladder without cholecystitis"
+  },
+  {
+    "id": 4,
+    "kode": "O82.0",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Delivery by elective caesarean section"
+  },
+  {
+    "id": 5,
+    "kode": "O82.1",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Delivery by emergency caesarean section"
+  },
+  {
+    "id": 6,
+    "kode": "S72.0",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Fracture of neck of femur"
+  },
+  {
+    "id": 7,
+    "kode": "S82.0",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Fracture of patella"
+  },
+  {
+    "id": 8,
+    "kode": "H25.9",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Senile cataract, unspecified"
+  },
+  {
+    "id": 9,
+    "kode": "H26.0",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Infantile and juvenile cataract"
+  },
+  {
+    "id": 10,
+    "kode": "J35.1",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Hypertrophy of tonsils"
+  },
+  {
+    "id": 11,
+    "kode": "J35.2",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Hypertrophy of adenoids"
+  },
+  {
+    "id": 12,
+    "kode": "N20.0",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Calculus of kidney"
+  },
+  {
+    "id": 13,
+    "kode": "N40",
+    "jenis_diagnosa": "utama",
+    "diagnosa": "Hyperplasia of prostate"
+  },
+  {
+    "id": 14,
+    "kode": "I10",
+    "jenis_diagnosa": "tambahan",
+    "diagnosa": "Essential (primary) hypertension"
+  },
+  {
+    "id": 15,
+    "kode": "E11.9",
+    "jenis_diagnosa": "tambahan",
+    "diagnosa": "Type 2 diabetes mellitus without complications"
+  },
+  {
+    "id": 16,
+    "kode": "Z87.8",
+    "jenis_diagnosa": "tambahan",
+    "diagnosa": "Personal history of other specified conditions"
+  },
+  {
+    "id": 17,
+    "kode": "D50.9",
+    "jenis_diagnosa": "tambahan",
+    "diagnosa": "Iron deficiency anaemia, unspecified"
+  },
+  {
+    "id": 18,
+    "kode": "K21.9",
+    "jenis_diagnosa": "tambahan",
+    "diagnosa": "Gastro-oesophageal reflux disease without oesophagitis"
+  }
+]
diff --git a/data/mock/dokter.json b/data/mock/dokter.json
new file mode 100644
index 0000000..28d4099
--- /dev/null
+++ b/data/mock/dokter.json
@@ -0,0 +1,62 @@
+[
+  {
+    "id": 1,
+    "nip": "197001011998031001",
+    "nama": "dr. Ahmad Suryadi, Sp.B",
+    "satuan_kerja": "Bedah Umum"
+  },
+  {
+    "id": 2,
+    "nip": "197505102000032001",
+    "nama": "dr. Siti Nurhaliza, Sp.OG",
+    "satuan_kerja": "Obstetri dan Ginekologi"
+  },
+  {
+    "id": 3,
+    "nip": "198008152005011002",
+    "nama": "dr. Budi Santoso, Sp.OT",
+    "satuan_kerja": "Ortopedi dan Traumatologi"
+  },
+  {
+    "id": 4,
+    "nip": "197803201999031003",
+    "nama": "dr. Rina Kartika, Sp.THT-KL",
+    "satuan_kerja": "THT-KL"
+  },
+  {
+    "id": 5,
+    "nip": "198512252010012004",
+    "nama": "dr. Muhammad Rizki, Sp.M",
+    "satuan_kerja": "Mata"
+  },
+  {
+    "id": 6,
+    "nip": "197906152002121001",
+    "nama": "dr. Dewi Anggraini, Sp.A",
+    "satuan_kerja": "Anak"
+  },
+  {
+    "id": 7,
+    "nip": "198201102008011005",
+    "nama": "dr. Hendra Wijaya, Sp.PD",
+    "satuan_kerja": "Penyakit Dalam"
+  },
+  {
+    "id": 8,
+    "nip": "197704252001032002",
+    "nama": "dr. Lestari Kusuma, Sp.U",
+    "satuan_kerja": "Urologi"
+  },
+  {
+    "id": 9,
+    "nip": "198509182012011006",
+    "nama": "dr. Agus Prasetyo, Sp.BS",
+    "satuan_kerja": "Bedah Saraf"
+  },
+  {
+    "id": 10,
+    "nip": "197811302003032003",
+    "nama": "dr. Fitri Handayani, Sp.JP",
+    "satuan_kerja": "Jantung dan Pembuluh Darah"
+  }
+]
diff --git a/data/mock/kategoriOperasi.json b/data/mock/kategoriOperasi.json
new file mode 100644
index 0000000..7902993
--- /dev/null
+++ b/data/mock/kategoriOperasi.json
@@ -0,0 +1,18 @@
+[
+  {
+    "id": 1,
+    "kategori": "Elektif"
+  },
+  {
+    "id": 2,
+    "kategori": "Cito"
+  },
+  {
+    "id": 3,
+    "kategori": "Emergency"
+  },
+  {
+    "id": 4,
+    "kategori": "One Day Care"
+  }
+]
diff --git a/data/mock/spesialis.json b/data/mock/spesialis.json
new file mode 100644
index 0000000..287c3eb
--- /dev/null
+++ b/data/mock/spesialis.json
@@ -0,0 +1,52 @@
+[
+  {
+    "id": 1,
+    "kode": "SP001",
+    "spesialis": "Bedah"
+  },
+  {
+    "id": 2,
+    "kode": "SP002",
+    "spesialis": "Obstetri dan Ginekologi"
+  },
+  {
+    "id": 3,
+    "kode": "SP003",
+    "spesialis": "Ortopedi dan Traumatologi"
+  },
+  {
+    "id": 4,
+    "kode": "SP004",
+    "spesialis": "THT-KL"
+  },
+  {
+    "id": 5,
+    "kode": "SP005",
+    "spesialis": "Mata"
+  },
+  {
+    "id": 6,
+    "kode": "SP006",
+    "spesialis": "Anak"
+  },
+  {
+    "id": 7,
+    "kode": "SP007",
+    "spesialis": "Penyakit Dalam"
+  },
+  {
+    "id": 8,
+    "kode": "SP008",
+    "spesialis": "Urologi"
+  },
+  {
+    "id": 9,
+    "kode": "SP009",
+    "spesialis": "Bedah Saraf"
+  },
+  {
+    "id": 10,
+    "kode": "SP010",
+    "spesialis": "Jantung dan Pembuluh Darah"
+  }
+]
diff --git a/data/mock/subSpesialis.json b/data/mock/subSpesialis.json
new file mode 100644
index 0000000..43be32a
--- /dev/null
+++ b/data/mock/subSpesialis.json
@@ -0,0 +1,92 @@
+[
+  {
+    "id": 1,
+    "kode": "SUB001",
+    "subspesialis": "Bedah Umum",
+    "id_spesialis": 1
+  },
+  {
+    "id": 2,
+    "kode": "SUB002",
+    "subspesialis": "Bedah Digestif",
+    "id_spesialis": 1
+  },
+  {
+    "id": 3,
+    "kode": "SUB003",
+    "subspesialis": "Bedah Onkologi",
+    "id_spesialis": 1
+  },
+  {
+    "id": 4,
+    "kode": "SUB004",
+    "subspesialis": "Bedah Plastik Rekonstruksi",
+    "id_spesialis": 1
+  },
+  {
+    "id": 5,
+    "kode": "SUB005",
+    "subspesialis": "Kebidanan",
+    "id_spesialis": 2
+  },
+  {
+    "id": 6,
+    "kode": "SUB006",
+    "subspesialis": "Ginekologi",
+    "id_spesialis": 2
+  },
+  {
+    "id": 7,
+    "kode": "SUB007",
+    "subspesialis": "Onkologi Ginekologi",
+    "id_spesialis": 2
+  },
+  {
+    "id": 8,
+    "kode": "SUB008",
+    "subspesialis": "Bedah Tulang",
+    "id_spesialis": 3
+  },
+  {
+    "id": 9,
+    "kode": "SUB009",
+    "subspesialis": "Bedah Tulang Belakang",
+    "id_spesialis": 3
+  },
+  {
+    "id": 10,
+    "kode": "SUB010",
+    "subspesialis": "Bedah Tangan",
+    "id_spesialis": 3
+  },
+  {
+    "id": 11,
+    "kode": "SUB011",
+    "subspesialis": "THT Umum",
+    "id_spesialis": 4
+  },
+  {
+    "id": 12,
+    "kode": "SUB012",
+    "subspesialis": "Rinologi",
+    "id_spesialis": 4
+  },
+  {
+    "id": 13,
+    "kode": "SUB013",
+    "subspesialis": "Oftalmologi Umum",
+    "id_spesialis": 5
+  },
+  {
+    "id": 14,
+    "kode": "SUB014",
+    "subspesialis": "Katarak dan Refraksi",
+    "id_spesialis": 5
+  },
+  {
+    "id": 15,
+    "kode": "SUB015",
+    "subspesialis": "Retina dan Vitreus",
+    "id_spesialis": 5
+  }
+]
diff --git a/data/mock/tindakan.json b/data/mock/tindakan.json
new file mode 100644
index 0000000..cd9fa04
--- /dev/null
+++ b/data/mock/tindakan.json
@@ -0,0 +1,110 @@
+[
+  {
+    "id": 1,
+    "kode": "47.0",
+    "tindakan": "Appendectomy",
+    "tindakan_tambahan": "Laparoscopic approach"
+  },
+  {
+    "id": 2,
+    "kode": "53.0",
+    "tindakan": "Unilateral repair of inguinal hernia",
+    "tindakan_tambahan": "With mesh"
+  },
+  {
+    "id": 3,
+    "kode": "51.22",
+    "tindakan": "Cholecystectomy",
+    "tindakan_tambahan": "Laparoscopic"
+  },
+  {
+    "id": 4,
+    "kode": "74.1",
+    "tindakan": "Low cervical cesarean section",
+    "tindakan_tambahan": "With tubal ligation"
+  },
+  {
+    "id": 5,
+    "kode": "74.0",
+    "tindakan": "Classical cesarean section",
+    "tindakan_tambahan": ""
+  },
+  {
+    "id": 6,
+    "kode": "79.15",
+    "tindakan": "Closed reduction of fracture of femur",
+    "tindakan_tambahan": "With internal fixation"
+  },
+  {
+    "id": 7,
+    "kode": "79.35",
+    "tindakan": "Open reduction of fracture of femur",
+    "tindakan_tambahan": "ORIF with dynamic hip screw"
+  },
+  {
+    "id": 8,
+    "kode": "13.19",
+    "tindakan": "Other intracapsular extraction of lens",
+    "tindakan_tambahan": "Phacoemulsification with IOL implant"
+  },
+  {
+    "id": 9,
+    "kode": "13.41",
+    "tindakan": "Phacoemulsification and aspiration of cataract",
+    "tindakan_tambahan": "With foldable IOL"
+  },
+  {
+    "id": 10,
+    "kode": "28.2",
+    "tindakan": "Tonsillectomy without adenoidectomy",
+    "tindakan_tambahan": ""
+  },
+  {
+    "id": 11,
+    "kode": "28.3",
+    "tindakan": "Tonsillectomy with adenoidectomy",
+    "tindakan_tambahan": ""
+  },
+  {
+    "id": 12,
+    "kode": "55.0",
+    "tindakan": "Nephrotomy and nephrostomy",
+    "tindakan_tambahan": "Percutaneous nephrolithotomy"
+  },
+  {
+    "id": 13,
+    "kode": "60.2",
+    "tindakan": "Transurethral prostatectomy",
+    "tindakan_tambahan": "TURP"
+  },
+  {
+    "id": 14,
+    "kode": "81.51",
+    "tindakan": "Total hip replacement",
+    "tindakan_tambahan": "Cemented"
+  },
+  {
+    "id": 15,
+    "kode": "81.54",
+    "tindakan": "Total knee replacement",
+    "tindakan_tambahan": "Cemented prosthesis"
+  },
+  {
+    "id": 16,
+    "kode": "45.41",
+    "tindakan": "Excision of lesion or tissue of large intestine",
+    "tindakan_tambahan": "Laparoscopic hemicolectomy"
+  },
+  {
+    "id": 17,
+    "kode": "38.12",
+    "tindakan": "Endarterectomy of other vessels of head and neck",
+    "tindakan_tambahan": "Carotid endarterectomy"
+  },
+  {
+    "id": 18,
+    "kode": "36.1",
+    "tindakan": "Bypass anastomosis for heart revascularization",
+    "tindakan_tambahan": "CABG with 3 grafts"
+  }
+]
diff --git a/pages/antrean/all.vue b/pages/antrean/all.vue
new file mode 100644
index 0000000..02e813f
--- /dev/null
+++ b/pages/antrean/all.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import antreanOperasiData from '~/data/mock/antreanOperasi.json';
+
+interface AntreanOperasi {
+    id: number;
+    jenisKelamin: string;
+    namaPasien: string;
+    noKtp: string;
+    noRekamMedis: string;
+}
+
+const page = ref({ title: 'List Antrean Operasi' });
+const breadcrumbs = ref([
+    {
+        text: 'Antrean',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'List Antrean Operasi',
+        disabled: true,
+        href: '#'
+    }
+]);
+
+const search = ref('');
+const antreanList = ref<AntreanOperasi[]>(antreanOperasiData);
+const currentPage = ref(1);
+const itemsPerPage = ref(10);
+
+const headers = [
+    { title: 'No. Urut', key: 'no', sortable: false },
+    { title: 'Jenis Kelamin', key: 'jenisKelamin', sortable: true },
+    { title: 'Nama Pasien', key: 'namaPasien', sortable: true },
+    { title: 'No Ktp', key: 'noKtp', sortable: true },
+    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true }
+];
+</script>
+<template>
+    <v-row>
+        <v-col cols="12">
+            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+        </v-col>
+        <v-col cols="12">
+            <v-card elevation="10">
+                <v-card-text>
+                    <div class="d-flex justify-space-between align-center mb-4">
+                        <v-text-field
+                            v-model="search"
+                            placeholder="Search..."
+                            variant="outlined"
+                            density="comfortable"
+                            hide-details
+                            prepend-inner-icon="mdi-magnify"
+                            style="max-width: 400px;"
+                        ></v-text-field>
+                        
+                        <v-btn
+                            color="primary"
+                            prepend-icon="mdi-plus"
+                            to="/antrean/pendaftaran"
+                        >
+                            Daftar Antrean Operasi Baru
+                        </v-btn>
+                    </div>
+
+                    <v-data-table
+                        :headers="headers"
+                        :items="antreanList"
+                        :search="search"
+                        class="elevation-1"
+                        item-value="id"
+                        v-model:page="currentPage"
+                        v-model:items-per-page="itemsPerPage"
+                    >
+                        <template #item.no="{ index }">
+                            {{ (currentPage - 1) * itemsPerPage + index + 1 }}
+                        </template>
+                        <template #item.jenisKelamin="{ item }">
+                            <v-chip
+                                :color="item.jenisKelamin === 'L' ? 'primary' : 'pink'"
+                                size="small"
+                            >
+                                {{ item.jenisKelamin }}
+                            </v-chip>
+                        </template>
+                    </v-data-table>
+                </v-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
+</template> 
\ No newline at end of file
diff --git a/pages/antrean/list-spesialis.vue b/pages/antrean/list-spesialis.vue
new file mode 100644
index 0000000..e5583c4
--- /dev/null
+++ b/pages/antrean/list-spesialis.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import spesialisData from '~/data/mock/spesialis.json';
+import subSpesialisData from '~/data/mock/subSpesialis.json';
+import antreanOperasiData from '~/data/mock/antreanOperasi.json';
+
+interface Spesialis {
+    id: number;
+    kode: string;
+    spesialis: string;
+}
+
+interface SubSpesialis {
+    id: number;
+    kode: string;
+    subspesialis: string;
+    id_spesialis: number;
+}
+
+interface AntreanOperasi {
+    id: number;
+    jenisKelamin: string;
+    namaPasien: string;
+    noKtp: string;
+    noRekamMedis: string;
+    kodeSpesialis: string;
+    kodeSubSpesialis: string;
+}
+
+const page = ref({ title: 'List Antrean Operasi Spesialis' });
+const breadcrumbs = ref([
+    {
+        text: 'Antrean',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'List Antrean Operasi Spesialis',
+        disabled: true,
+        href: '#'
+    }
+]);
+
+const spesialisList = ref<Spesialis[]>(spesialisData);
+const subSpesialisList = ref<SubSpesialis[]>(subSpesialisData);
+const antreanList = ref<AntreanOperasi[]>(antreanOperasiData);
+
+// Function to get sub-spesialis by spesialis id
+const getSubSpesialisBySpesialisId = (spesialisId: number) => {
+    return subSpesialisList.value.filter(sub => sub.id_spesialis === spesialisId);
+};
+
+// Function to count antrian by spesialis kode
+const countAntreanBySpesialis = (kodeSpesialis: string) => {
+    return antreanList.value.filter(antrian => antrian.kodeSpesialis === kodeSpesialis).length;
+};
+
+// Function to count antrian by sub-spesialis kode
+const countAntreanBySubSpesialis = (kodeSubSpesialis: string) => {
+    return antreanList.value.filter(antrian => antrian.kodeSubSpesialis === kodeSubSpesialis).length;
+};
+
+</script>
+<template>
+    <v-row>
+        <v-col cols="12">
+            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+        </v-col>
+        
+        <v-col 
+            v-for="spesialis in spesialisList" 
+            :key="spesialis.id"
+            cols="12"
+            md="4"
+        >
+            <v-card elevation="10" class="h-100">
+                <NuxtLink :to="`/antrean/spesialis/${spesialis.kode}`" style="text-decoration: none; color: inherit;">
+                    <v-card-item style="cursor: pointer;" class="v-card-item--link">
+                        <div class="d-flex align-center justify-space-between">
+                            <h5 class="text-h6 font-weight-bold">Spesialis: {{ spesialis.spesialis }}</h5>
+                            <v-icon size="large" color="primary">mdi-chevron-right</v-icon>
+                        </div>
+                        <v-chip class="mt-3 mb-0"  color="primary" size="small">{{ countAntreanBySpesialis(spesialis.kode) }} Antrean</v-chip>
+                    </v-card-item>
+                </NuxtLink>
+                <v-divider></v-divider>
+                <v-card-text>
+
+                    <v-label class="mb-2 font-weight-medium text-subtitle-2">Sub Spesialis:</v-label>
+                    <v-list density="compact" class="py-0">
+                        <v-list-item
+                            v-for="subSpesialis in getSubSpesialisBySpesialisId(spesialis.id)"
+                            :key="subSpesialis.id"
+                            class="px-0"
+                            :to="`/antrean/subspesialis/${subSpesialis.kode}`"
+                        >
+                            <template #prepend>
+                                <v-icon size="small" color="primary">mdi-chevron-right</v-icon>
+                            </template>
+                            <v-list-item-title class="text-body-2">
+                                {{ subSpesialis.subspesialis }}
+                            </v-list-item-title>
+                            <template #append>
+                                <v-chip size="x-small" variant="outlined" color="primary">
+                                    {{ countAntreanBySubSpesialis(subSpesialis.kode) }} Antrean
+                                </v-chip>
+                            </template>
+                        </v-list-item>
+                        
+                        <v-list-item v-if="getSubSpesialisBySpesialisId(spesialis.id).length === 0" class="px-0">
+                            <v-list-item-title class="text-body-2 text-medium-emphasis">
+                                Tidak ada sub spesialis
+                            </v-list-item-title>
+                        </v-list-item>
+                    </v-list>
+                </v-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
+</template> 
\ No newline at end of file
diff --git a/pages/antrean/pendaftaran.vue b/pages/antrean/pendaftaran.vue
new file mode 100644
index 0000000..1c4d24e
--- /dev/null
+++ b/pages/antrean/pendaftaran.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import BiodataPasien from '@/components/pendaftaran/BiodataPasien.vue';
+import MedisPasien from '@/components/pendaftaran/MedisPasien.vue';
+import RencanaOperasi from '@/components/pendaftaran/RencanaOperasi.vue';
+import StatusPasienOperasi from '@/components/pendaftaran/StatusPasienOperasi.vue';
+import { usePendaftaranStore } from '@/store/pendaftaran';
+import { storeToRefs } from 'pinia';
+
+const router = useRouter();
+const route = useRoute();
+const pendaftaranStore = usePendaftaranStore();
+
+// Use storeToRefs to make state reactive
+const {
+    formData,
+    diagnosisItems,
+    tindakanItems,
+    rencanaOperasiData,
+    dokterPelaksanaItems,
+    statusPasienData,
+    loading,
+    snackbar,
+    snackbarMessage,
+    snackbarColor
+} = storeToRefs(pendaftaranStore);
+
+const form = ref();
+const valid = ref(true);
+
+const page = ref({ title: 'Pendaftaran Antrean Operasi' });
+const breadcrumbs = ref([
+    {
+        text: 'Antrean',
+        disabled: true,
+        href: '#'
+    },
+    {
+        text: 'Pendaftaran',
+        disabled: true,
+        href: '#'
+    }
+]);
+
+// Auto-select spesialis dan sub spesialis dari query parameter
+onMounted(async () => {
+    const kodeSpesialis = route.query.kodeSpesialis as string;
+    const kodeSubSpesialis = route.query.kodeSubSpesialis as string;
+    
+    await pendaftaranStore.initializeFromQuery(kodeSpesialis, kodeSubSpesialis);
+});
+
+const handleSimpan = async () => {
+    const { valid } = await form.value.validate();
+    
+    if (valid) {
+        // Validate using store method
+        const validation = pendaftaranStore.validateForm();
+        
+        if (!validation.valid) {
+            const errorMessage = `Data berikut harus diisi:\n\n${validation.errors.join(', ')}`;
+            pendaftaranStore.showSnackbar(errorMessage, 'error');
+            return;
+        }
+        
+        // Submit form using store action
+        const result = await pendaftaranStore.submitForm();
+        
+        if (result.success) {
+            // Navigate back or to list page
+            // router.push('/antrean/list');
+        }
+    } else {
+        // Validate using store method
+        const validation = pendaftaranStore.validateForm();
+        const errorMessage = `Data berikut harus diisi:\n\n${validation.errors.join(', ')}`;
+        pendaftaranStore.showSnackbar(errorMessage, 'error');
+    }
+};
+
+const handleReset = () => {
+    if (confirm('Apakah Anda yakin ingin mereset form?')) {
+        form.value.reset();
+        pendaftaranStore.resetForm();
+    }
+};
+
+const handleKembali = () => {
+    router.back();
+};
+</script>
+<template>
+    <v-form ref="form" v-model="valid" lazy-validation>
+        <v-row>
+            <v-col cols="12">
+                <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+            </v-col>
+            
+            <!-- Data Biodata Pasien -->
+        <v-col cols="12">
+            <BiodataPasien v-model="formData" />
+        </v-col>
+
+        <!-- Data Medis Pasien -->
+        <v-col cols="12">
+            <MedisPasien 
+                v-model:diagnosis-items="diagnosisItems"
+                v-model:tindakan-items="tindakanItems"
+            />
+        </v-col>
+
+        <!-- Data Rencana Operasi -->
+        <v-col cols="12">
+            <RencanaOperasi 
+                v-model:rencana-operasi-data="rencanaOperasiData"
+                v-model:dokter-pelaksana-items="dokterPelaksanaItems"
+            />
+        </v-col>
+
+        <!-- Data Status Pasien Operasi -->
+        <v-col cols="12">
+            <StatusPasienOperasi v-model="statusPasienData" />
+        </v-col>
+
+        <!-- Action Buttons -->
+        <v-col cols="12">
+            <v-card elevation="10">
+                <v-card-text>
+                    <div class="d-flex justify-end ga-3">
+                        <v-btn 
+                            color="default" 
+                            size="large" 
+                            variant="outlined"
+                            @click="handleKembali"
+                        >
+                            Kembali
+                        </v-btn>
+                        <v-btn 
+                            color="error" 
+                            size="large" 
+                            variant="outlined"
+                            @click="handleReset"
+                        >
+                            Reset
+                        </v-btn>
+                        <v-btn 
+                            color="primary" 
+                            size="large"
+                            :loading="loading"
+                            @click="handleSimpan"
+                        >
+                            Simpan
+                        </v-btn>
+                    </div>
+                </v-card-text>
+            </v-card>
+        </v-col>
+        </v-row>
+    </v-form>
+
+    <!-- Snackbar for notifications -->
+    <v-snackbar
+        v-model="snackbar"
+        :color="snackbarColor"
+        :timeout="3000"
+        location="top"
+    >
+        {{ snackbarMessage }}
+        <template #actions>
+            <v-btn
+                variant="text"
+                @click="pendaftaranStore.closeSnackbar()"
+            >
+                Close
+            </v-btn>
+        </template>
+    </v-snackbar>
+</template>
\ No newline at end of file
diff --git a/pages/antrean/spesialis/[kode].vue b/pages/antrean/spesialis/[kode].vue
new file mode 100644
index 0000000..2bee623
--- /dev/null
+++ b/pages/antrean/spesialis/[kode].vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import antreanOperasiData from '~/data/mock/antreanOperasi.json';
+import spesialisData from '~/data/mock/spesialis.json';
+
+interface AntreanOperasi {
+    id: number;
+    jenisKelamin: string;
+    namaPasien: string;
+    noKtp: string;
+    noRekamMedis: string;
+    kodeSpesialis: string;
+    kodeSubSpesialis: string;
+}
+
+const route = useRoute();
+const kodeSpesialis = route.params.kode as string;
+
+// Find spesialis info
+const spesialisInfo = spesialisData.find(s => s.kode === kodeSpesialis);
+
+const page = ref({ 
+    title: spesialisInfo ? `List Antrian ${spesialisInfo.spesialis}` : 'List Antrian Spesialis' 
+});
+
+const breadcrumbs = ref([
+    {
+        text: 'Antrean',
+        disabled: false,
+        href: '/antrean'
+    },
+    {
+        text: 'List Spesialis',
+        disabled: false,
+        href: '/antrean/list-spesialis'
+    },
+    {
+        text: spesialisInfo ? spesialisInfo.spesialis : kodeSpesialis,
+        disabled: true,
+        href: '#'
+    }
+]);
+
+const search = ref('');
+const antreanList = ref<AntreanOperasi[]>(
+    antreanOperasiData.filter(antrian => antrian.kodeSpesialis === kodeSpesialis)
+);
+const currentPage = ref(1);
+const itemsPerPage = ref(10);
+
+const headers = [
+    { title: 'No. Urut', key: 'no', sortable: false },
+    { title: 'Jenis Kelamin', key: 'jenisKelamin', sortable: true },
+    { title: 'Nama Pasien', key: 'namaPasien', sortable: true },
+    { title: 'No Ktp', key: 'noKtp', sortable: true },
+    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true }
+];
+</script>
+
+<template>
+    <v-row>
+        <v-col cols="12">
+            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+        </v-col>
+        <v-col cols="12">
+            <v-card elevation="10">
+                <v-card-text>
+                    <div class="d-flex justify-space-between align-center mb-4">
+                        <v-text-field
+                            v-model="search"
+                            placeholder="Search..."
+                            variant="outlined"
+                            density="comfortable"
+                            hide-details
+                            prepend-inner-icon="mdi-magnify"
+                            style="max-width: 400px;"
+                        ></v-text-field>
+                        
+                        <v-btn
+                            color="primary"
+                            prepend-icon="mdi-plus"
+                            :to="`/antrean/pendaftaran?kodeSpesialis=${kodeSpesialis}`"
+                        >
+                            Daftar Antrean Operasi Baru
+                        </v-btn>
+                    </div>
+
+                    <v-data-table
+                        :headers="headers"
+                        :items="antreanList"
+                        :search="search"
+                        class="elevation-1"
+                        item-value="id"
+                        v-model:page="currentPage"
+                        v-model:items-per-page="itemsPerPage"
+                    >
+                        <template #item.no="{ index }">
+                            {{ (currentPage - 1) * itemsPerPage + index + 1 }}
+                        </template>
+                        <template #item.jenisKelamin="{ item }">
+                            <v-chip
+                                :color="item.jenisKelamin === 'L' ? 'primary' : 'pink'"
+                                size="small"
+                            >
+                                {{ item.jenisKelamin }}
+                            </v-chip>
+                        </template>
+                    </v-data-table>
+                </v-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
diff --git a/pages/antrean/subspesialis/[kode].vue b/pages/antrean/subspesialis/[kode].vue
new file mode 100644
index 0000000..88e7a9c
--- /dev/null
+++ b/pages/antrean/subspesialis/[kode].vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import antreanOperasiData from '~/data/mock/antreanOperasi.json';
+import subSpesialisData from '~/data/mock/subSpesialis.json';
+import spesialisData from '~/data/mock/spesialis.json';
+
+interface AntreanOperasi {
+    id: number;
+    jenisKelamin: string;
+    namaPasien: string;
+    noKtp: string;
+    noRekamMedis: string;
+    kodeSpesialis: string;
+    kodeSubSpesialis: string;
+}
+
+const route = useRoute();
+const kodeSubSpesialis = route.params.kode as string;
+
+// Find sub-spesialis info
+const subSpesialisInfo = subSpesialisData.find(s => s.kode === kodeSubSpesialis);
+
+const page = ref({ 
+    title: subSpesialisInfo ? `List Antrian ${subSpesialisInfo.subspesialis}` : 'List Antrian Sub Spesialis' 
+});
+
+const breadcrumbs = ref([
+    {
+        text: 'Antrean',
+        disabled: false,
+        href: '/antrean'
+    },
+    {
+        text: 'List Spesialis',
+        disabled: false,
+        href: '/antrean/list-spesialis'
+    },
+    {
+        text: subSpesialisInfo ? subSpesialisInfo.subspesialis : kodeSubSpesialis,
+        disabled: true,
+        href: '#'
+    }
+]);
+
+const search = ref('');
+const antreanList = ref<AntreanOperasi[]>(
+    antreanOperasiData.filter(antrian => antrian.kodeSubSpesialis === kodeSubSpesialis)
+);
+const currentPage = ref(1);
+const itemsPerPage = ref(10);
+
+const headers = [
+    { title: 'No. Urut', key: 'no', sortable: false },
+    { title: 'Jenis Kelamin', key: 'jenisKelamin', sortable: true },
+    { title: 'Nama Pasien', key: 'namaPasien', sortable: true },
+    { title: 'No Ktp', key: 'noKtp', sortable: true },
+    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true }
+];
+
+// Get kode spesialis from subSpesialisInfo
+const kodeSpesialis = computed(() => {
+    if (subSpesialisInfo && subSpesialisInfo.id_spesialis) {
+        const spesialis = spesialisData.find(s => s.id === subSpesialisInfo.id_spesialis);
+        return spesialis?.kode || '';
+    }
+    return '';
+});
+
+// Computed URL for pendaftaran with query params
+const pendaftaranUrl = computed(() => {
+    return `/antrean/pendaftaran?kodeSpesialis=${kodeSpesialis.value}&kodeSubSpesialis=${kodeSubSpesialis}`;
+});
+</script>
+
+<template>
+    <v-row>
+        <v-col cols="12">
+            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+        </v-col>
+        <v-col cols="12">
+            <v-card elevation="10">
+                <v-card-text>
+                    <div class="d-flex justify-space-between align-center mb-4">
+                        <v-text-field
+                            v-model="search"
+                            placeholder="Search..."
+                            variant="outlined"
+                            density="comfortable"
+                            hide-details
+                            prepend-inner-icon="mdi-magnify"
+                            style="max-width: 400px;"
+                        ></v-text-field>
+                        
+                        <v-btn
+                            color="primary"
+                            prepend-icon="mdi-plus"
+                            :to="pendaftaranUrl"
+                        >
+                            Daftar Antrean Operasi Baru
+                        </v-btn>
+                    </div>
+
+                    <v-data-table
+                        :headers="headers"
+                        :items="antreanList"
+                        :search="search"
+                        class="elevation-1"
+                        item-value="id"
+                        v-model:page="currentPage"
+                        v-model:items-per-page="itemsPerPage"
+                    >
+                        <template #item.no="{ index }">
+                            {{ (currentPage - 1) * itemsPerPage + index + 1 }}
+                        </template>
+                        <template #item.jenisKelamin="{ item }">
+                            <v-chip
+                                :color="item.jenisKelamin === 'L' ? 'primary' : 'pink'"
+                                size="small"
+                            >
+                                {{ item.jenisKelamin }}
+                            </v-chip>
+                        </template>
+                    </v-data-table>
+                </v-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
diff --git a/pages/auth/Login.vue b/pages/auth/Login.vue
index 42466c8..8f9a324 100644
--- a/pages/auth/Login.vue
+++ b/pages/auth/Login.vue
@@ -1,78 +1,87 @@
 <template>
-  <div class="authentication auth-bg">
+  <div class="authentication bg-gray">
     <v-container class="pa-3 auth-login">
       <v-row class="h-100vh d-flex justify-center align-center">
+        <v-col cols="12" class="text-center mt-6">
+        </v-col>
         <v-col cols="12" class="d-flex align-center">
           <v-card rounded="md" elevation="10" class="mx-auto">
             <div class="pa-3">
               <v-row>
-                <v-col
-                  cols="12"
-                  md="6"
-                  class="border-e px-md-12 px-6 py-md-12 py-6"
-                >
-                  <div class="d-flex"><LayoutFullLogo /></div>
-                  <h2 class="text-34 my-6">Let's get you signed in two</h2>
-                  <AuthBoxedLoginForm />
-                  <h6
-                    class="text-16 text-medium-emphasis d-flex align-center mt-6"
-                  >
-                    Don’t have an account yet?
-                    <v-btn
-                      class="pl-0 text-primary text-16 opacity-1 pl-2"
-                      height="auto"
-                      to="/auth/register2"
-                      variant="plain"
-                      >Sign Up Now</v-btn
-                    >
-                  </h6>
-                </v-col>
-                <v-col cols="12" md="6" class="d-md-flex d-none">
-                  <div
-                    class="d-flex flex-column justify-center px-md-12 px-6 h-100 align-center"
-                  >
+                <v-col cols="12" md="6" class="border-e px-md-12 px-6 py-md-12 py-6 bg-primary rounded-s-md">
+                  <div class="login-container d-flex flex-column justify-space-between h-100 w-100">
+
+                    <!-- TOP AREA -->
                     <div>
-                      <img
-                        src="@/assets/images/backgrounds/login-side.png"
-                        alt="matdash-img"
-                        width="300"
-                      />
+                      <!-- Logo and Title -->
+                      <div class="mb-8">
+                        <div class="d-flex align-center mb-2">
+                          <v-icon size="40" color="white">mdi-hospital-building</v-icon>
+                          <div class="ml-3">
+                            <h2 class="text-h5 font-weight-bold">Antrean Operasi</h2>
+                            <p class="text-caption">
+                              RSUD Dr. Saiful Anwar Provinsi Jawa Timur
+                            </p>
+                          </div>
+                        </div>
+                      </div>
                     </div>
 
-                    <v-carousel
-                      :continuous="false"
-                      :show-arrows="false"
-                      cycle
-                      height="200"
-                      hide-delimiter-background
-                      class="text-center mt-4"
-                    >
-                      <v-carousel-item
-                        v-for="item in AuthCuroselData"
-                        :key="item.title"
-                      >
-                        <h3 class="text-h3 mb-4">{{ item.title }}</h3>
-                        <p class="textSecondary text-body-1">
-                          {{ item.subtitle }}
-                        </p>
-                        <v-btn color="primary" class="mt-4" flat
-                          >Learn More</v-btn
-                        >
-                      </v-carousel-item>
-                    </v-carousel>
+                    <!-- Sign In Section -->
+                    <div class="mb-8 pa-4">
+                      <h1 class="text-h3 font-weight-bold mb-6">Login</h1>
+
+                      <v-btn cli color="default" size="x-large" block class="text-none mb-4 text-primary" elevation="0" to="/">
+                        <v-icon left class="mr-3">mdi-account-circle</v-icon>
+                        Log In with Keycloak
+                      </v-btn>
+                    </div>
+
+                    <!-- BOTTOM AREA -->
+                    <div class="d-flex align-center text-white">
+                      <v-icon size="small" class="mr-2">mdi-lock-outline</v-icon>
+                      <span class="text-caption">Not Authenticated</span>
+                    </div>
+
+                  </div>
+                </v-col>
+                <v-col cols="12" md="6" class="d-md-flex d-none">
+                  <div class="d-flex flex-column justify-center px-md-12 px-6 h-100 align-center">
+                    <div class="mt-16">
+                      <img src="@/assets/images/backgrounds/undraw_wait-in-line_login.svg" alt="matdash-img"
+                        width="300" />
+                    </div>
+                      <v-carousel :continuous="false" :show-arrows="false" cycle height="200" hide-delimiter-background
+                        class="text-center mt-4">
+                        <v-carousel-item v-for="item in AuthCuroselData" :key="item.title">
+                          <h3 class="text-h3 mb-4">{{ item.title }}</h3>
+                          <p class="textSecondary">
+                            {{ item.subtitle }}
+                          </p>
+                        </v-carousel-item>
+                      </v-carousel>
+
                   </div>
                 </v-col>
               </v-row>
             </div>
           </v-card>
         </v-col>
+        <v-col cols="12" class="text-center mt-6">
+          <p class="text-caption textSecondary">&copy; 2026 RSUD Dr. Saiful Anwar Provinsi Jawa Timur. All rights reserved.</p> 
+        </v-col>
       </v-row>
     </v-container>
   </div>
 </template>
 
 <script setup lang="ts">
-import { AuthCuroselData } from "@/_mockApis/components/pages/auth";
+const AuthCuroselData = [
+  {
+    title: 'Sistem Antrean Operasi',
+    subtitle: 'Kelola antrean operasi dengan efisien menggunakan sistem antrean.'
+  }
+];
 /*-For Set Blank Layout-*/
 definePageMeta({
   layout: "blank"
diff --git a/pages/index.vue b/pages/index.vue
index 340eaa3..195d5a8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,22 +1,191 @@
 <script setup lang="ts">
-/*Call Components*/
-import RevenueCard from '@/components/dashboard/RevenueCard.vue';
-import NewCustomer from '@/components/dashboard/NewCustomer.vue';
-import Totalincome from '@/components/dashboard/TotalIncome.vue';
-import RevenueProduct from '@/components/dashboard/RevenueProducts.vue';
-import DailyActivities from '@/components/dashboard/DailyActivities.vue';
-import BlogCards from '@/components/dashboard/BlogCards.vue';
+import { ref } from 'vue';
+import { Icon } from '@iconify/vue';
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+
+
+// Data dummy untuk antrian operasi
+const totalActive = ref(45);
+const totalInactive = ref(12);
+const totalAll = ref(57);
+
+// Data antrian per spesialis
+const antrianPerSpesialis = ref([
+    { spesialis: 'Bedah Umum', total: 15, active: 12, inactive: 3 },
+    { spesialis: 'Bedah Ortopedi', total: 10, active: 8, inactive: 2 },
+    { spesialis: 'Bedah Saraf', total: 8, active: 7, inactive: 1 },
+    { spesialis: 'Bedah Jantung', total: 12, active: 10, inactive: 2 },
+    { spesialis: 'Bedah Plastik', total: 7, active: 5, inactive: 2 },
+    { spesialis: 'Bedah Urologi', total: 5, active: 3, inactive: 2 }
+]);
+
+// Data antrian per subspesialis
+const antrianPerSubspesialis = ref([
+    { spesialis: 'Bedah Umum', subspesialis: 'Digestif', total: 8, active: 7, inactive: 1 },
+    { spesialis: 'Bedah Umum', subspesialis: 'Onkologi', total: 7, active: 5, inactive: 2 },
+    { spesialis: 'Bedah Ortopedi', subspesialis: 'Traumatologi', total: 6, active: 5, inactive: 1 },
+    { spesialis: 'Bedah Ortopedi', subspesialis: 'Spine', total: 4, active: 3, inactive: 1 },
+    { spesialis: 'Bedah Saraf', subspesialis: 'Tumor', total: 5, active: 4, inactive: 1 },
+    { spesialis: 'Bedah Saraf', subspesialis: 'Vaskular', total: 3, active: 3, inactive: 0 },
+    { spesialis: 'Bedah Jantung', subspesialis: 'Dewasa', total: 7, active: 6, inactive: 1 },
+    { spesialis: 'Bedah Jantung', subspesialis: 'Anak', total: 5, active: 4, inactive: 1 }
+]);
+
+const searchSpesialis = ref('');
+const searchSubspesialis = ref('');
+
+const headersSpesialis = [
+    { title: 'Spesialis', key: 'spesialis' },
+    { title: 'Total', key: 'total', align: 'center' as const },
+    { title: 'Active', key: 'active', align: 'center' as const },
+    { title: 'Inactive', key: 'inactive', align: 'center' as const }
+];
+
+const headersSubspesialis = [
+    { title: 'Spesialis', key: 'spesialis' },
+    { title: 'Subspesialis', key: 'subspesialis' },
+    { title: 'Total', key: 'total', align: 'center' as const },
+    { title: 'Active', key: 'active', align: 'center' as const },
+    { title: 'Inactive', key: 'inactive', align: 'center' as const }
+];
+const page = ref({ title: 'Dashboard' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  }
+]);
 </script>
 
 <template>
     <v-row>
-        <v-col cols="12" lg="8"><RevenueCard /></v-col>
-        <v-col cols="12" lg="4"
-            ><NewCustomer class="mb-6" />
-            <Totalincome />
+        <!-- Score Cards -->
+         <v-col cols="12">
+            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+        </v-col>
+        <v-col cols="12" md="4">
+            <v-card elevation="10">
+                <v-card-item>
+                    <div class="d-flex ga-3 align-center">
+                        <v-avatar size="48" class="rounded-md bg-lightsuccess">
+                            <Icon icon="solar:checklist-outline" class="text-success" height="25" />
+                        </v-avatar>
+                        <div>
+                            <h6 class="text-subtitle-2 text-medium-emphasis mb-1">Total Antrian Aktif</h6>
+                            <h3 class="text-h3 font-weight-bold">{{ totalActive }}</h3>
+                        </div>
+                    </div>
+                </v-card-item>
+            </v-card>
+        </v-col>
+
+        <v-col cols="12" md="4">
+            <v-card elevation="10">
+                <v-card-item>
+                    <div class="d-flex ga-3 align-center">
+                        <v-avatar size="48" class="rounded-md bg-lighterror">
+                            <Icon icon="solar:close-circle-outline" class="text-error" height="25" />
+                        </v-avatar>
+                        <div>
+                            <h6 class="text-subtitle-2 text-medium-emphasis mb-1">Total Antrian Tidak Aktif</h6>
+                            <h3 class="text-h3 font-weight-bold">{{ totalInactive }}</h3>
+                        </div>
+                    </div>
+                </v-card-item>
+            </v-card>
+        </v-col>
+
+        <v-col cols="12" md="4">
+            <v-card elevation="10">
+                <v-card-item>
+                    <div class="d-flex ga-3 align-center">
+                        <v-avatar size="48" class="rounded-md bg-lightsecondary">
+                            <Icon icon="solar:list-check-outline" class="text-secondary" height="25" />
+                        </v-avatar>
+                        <div>
+                            <h6 class="text-subtitle-2 text-medium-emphasis mb-1">Total Semua Antrian</h6>
+                            <h3 class="text-h3 font-weight-bold">{{ totalAll }}</h3>
+                        </div>
+                    </div>
+                </v-card-item>
+            </v-card>
+        </v-col>
+
+        <!-- Table Antrian Per Spesialis -->
+        <v-col cols="12" lg="6">
+            <v-card elevation="10">
+                <v-card-item>
+                    <div class="d-flex align-center justify-space-between mb-4">
+                        <h5 class="text-h5 font-weight-bold">Antrian Per Spesialis</h5>
+                        <v-avatar size="40" class="rounded-md bg-lightprimary">
+                            <Icon icon="solar:users-group-rounded-outline" class="text-primary" height="22" />
+                        </v-avatar>
+                    </div>
+                    <v-text-field v-model="searchSpesialis" density="compact" placeholder="Cari spesialis..."
+                        prepend-inner-icon="mdi-magnify" variant="outlined" hide-details clearable
+                        class="mb-4"></v-text-field>
+                </v-card-item>
+                <v-divider></v-divider>
+                <v-card-text class="pa-0">
+                    <v-data-table :headers="headersSpesialis" :items="antrianPerSpesialis" :search="searchSpesialis"
+                        :items-per-page="10" class="border-0" hide-default-footer>
+                        <template v-slot:item.total="{ item }">
+                            <v-chip size="small" color="primary" variant="tonal">
+                                {{ item.total }}
+                            </v-chip>
+                        </template>
+                        <template v-slot:item.active="{ item }">
+                            <v-chip size="small" color="success" variant="tonal">
+                                {{ item.active }}
+                            </v-chip>
+                        </template>
+                        <template v-slot:item.inactive="{ item }">
+                            <v-chip size="small" color="error" variant="tonal">
+                                {{ item.inactive }}
+                            </v-chip>
+                        </template>
+                    </v-data-table>
+                </v-card-text>
+            </v-card>
+        </v-col>
+
+        <!-- Table Antrian Per Subspesialis -->
+        <v-col cols="12" lg="6">
+            <v-card elevation="10">
+                <v-card-item>
+                    <div class="d-flex align-center justify-space-between mb-4">
+                        <h5 class="text-h5 font-weight-bold">Antrian Per Subspesialis</h5>
+                        <v-avatar size="40" class="rounded-md bg-lightsecondary">
+                            <Icon icon="solar:users-group-two-rounded-outline" class="text-secondary" height="22" />
+                        </v-avatar>
+                    </div>
+                    <v-text-field v-model="searchSubspesialis" density="compact"
+                        placeholder="Cari spesialis atau subspesialis..." prepend-inner-icon="mdi-magnify"
+                        variant="outlined" hide-details clearable class="mb-4"></v-text-field>
+                </v-card-item>
+                <v-divider></v-divider>
+                <v-card-text class="pa-0">
+                    <v-data-table :headers="headersSubspesialis" :items="antrianPerSubspesialis"
+                        :search="searchSubspesialis" :items-per-page="10" class="border-0" hide-default-footer>
+                        <template v-slot:item.total="{ item }">
+                            <v-chip size="small" color="primary" variant="tonal">
+                                {{ item.total }}
+                            </v-chip>
+                        </template>
+                        <template v-slot:item.active="{ item }">
+                            <v-chip size="small" color="success" variant="tonal">
+                                {{ item.active }}
+                            </v-chip>
+                        </template>
+                        <template v-slot:item.inactive="{ item }">
+                            <v-chip size="small" color="error" variant="tonal">
+                                {{ item.inactive }}
+                            </v-chip>
+                        </template>
+                    </v-data-table>
+                </v-card-text>
+            </v-card>
         </v-col>
-        <v-col cols="12" lg="8"><RevenueProduct/></v-col>
-        <v-col cols="12" lg="4"><DailyActivities/> </v-col>
-        <v-col cols="12"><BlogCards/></v-col>
     </v-row>
 </template>
diff --git a/services/api.ts b/services/api.ts
new file mode 100644
index 0000000..60d2215
--- /dev/null
+++ b/services/api.ts
@@ -0,0 +1,31 @@
+import axios from 'axios'
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  timeout: 10000,
+})
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token')
+
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+//   const cookies = `directus_session_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjA2ZGM5MGY3LWUzY2YtNGY1Ny04N2VjLTM4ZDhhYzJjNTNjOSIsInJvbGUiOm51bGwsImFwcF9hY2Nlc3MiOnRydWUsImFkbWluX2FjY2VzcyI6dHJ1ZSwic2Vzc2lvbiI6ImQ1UzhTVGN6enh5YWJYOEdkR0N0UDFxYU9Ud1VIamdLRWEtR2ZpYXlOczZxcUQ1MnlacS1lWGh5clE3TUxfeHoiLCJpYXQiOjE3NjkzOTMwMzYsImV4cCI6MTc2OTQ3OTQzNiwiaXNzIjoiZGlyZWN0dXMifQ.p-Di4C3e6bmSp-46fIhGv6HH_cq3hQRA_XcfXJLAiIA; _dd_s=logs=1&id=be53286e-881e-490b-aae1-88555740b7fb&created=1769393024176&expire=1769393960283`
+//   if(cookies){
+//     config.headers.Cookie = cookies
+//   }
+
+  return config
+})
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // centralized error
+    console.error('API Error:', error.response)
+    return Promise.reject(error)
+  }
+)
+
+export default api
\ No newline at end of file
diff --git a/store/pendaftaran.ts b/store/pendaftaran.ts
new file mode 100644
index 0000000..4fac24d
--- /dev/null
+++ b/store/pendaftaran.ts
@@ -0,0 +1,245 @@
+import { defineStore } from 'pinia';
+import spesialisData from '~/data/mock/spesialis.json';
+import subSpesialisData from '~/data/mock/subSpesialis.json';
+
+interface FormData {
+    noRekamMedis: string;
+    noKtp: string;
+    namaPasien: string;
+    jenisKelamin: string;
+    tanggalLahir: string;
+    umur: string;
+    alamat: string;
+    nomorTelepon: string[];
+}
+
+interface RencanaOperasiData {
+    spesialis: number | null | undefined;
+    subSpesialis: number | null | undefined;
+    tanggalDaftar: string;
+    kategoriOperasi: number | null | undefined;
+    rencanaOperasi: string;
+    keterangan: string;
+}
+
+interface StatusPasienData {
+    tanggalSelesai: string;
+    statusOperasi: string;
+    keteranganStatus: string;
+}
+
+interface Dokter {
+    id: number;
+    nip: string;
+    nama: string;
+    satuan_kerja: string;
+}
+
+export const usePendaftaranStore = defineStore('pendaftaran', {
+    state: () => ({
+        // Form data
+        formData: {
+            noRekamMedis: '',
+            noKtp: '',
+            namaPasien: '',
+            jenisKelamin: '',
+            tanggalLahir: '',
+            umur: '',
+            alamat: '',
+            nomorTelepon: []
+        } as FormData,
+
+        // Medical data
+        diagnosisItems: [] as any[],
+        tindakanItems: [] as any[],
+
+        // Rencana Operasi data
+        rencanaOperasiData: {
+            spesialis: null as number | null | undefined,
+            subSpesialis: null as number | null | undefined,
+            tanggalDaftar: '',
+            kategoriOperasi: null as number | null | undefined,
+            rencanaOperasi: '',
+            keterangan: ''
+        } as RencanaOperasiData,
+
+        dokterPelaksanaItems: [] as Dokter[],
+
+        // Status Pasien data
+        statusPasienData: {
+            tanggalSelesai: '',
+            statusOperasi: 'Belum',
+            keteranganStatus: ''
+        } as StatusPasienData,
+
+        // UI state
+        loading: false,
+        snackbar: false,
+        snackbarMessage: '',
+        snackbarColor: 'error'
+    }),
+
+    getters: {
+        // Check if form has any data
+        hasFormData: (state) => {
+            return !!(
+                state.formData.noRekamMedis ||
+                state.formData.namaPasien ||
+                state.diagnosisItems.length > 0 ||
+                state.tindakanItems.length > 0 ||
+                state.rencanaOperasiData.spesialis ||
+                state.dokterPelaksanaItems.length > 0
+            );
+        },
+
+        // Get all form data for submission
+        getSubmissionData: (state) => {
+            return {
+                formData: state.formData,
+                diagnosisItems: state.diagnosisItems,
+                tindakanItems: state.tindakanItems,
+                rencanaOperasiData: state.rencanaOperasiData,
+                dokterPelaksanaItems: state.dokterPelaksanaItems,
+                statusPasienData: state.statusPasienData
+            };
+        }
+    },
+
+    actions: {
+        // Initialize form with query parameters
+        async initializeFromQuery(kodeSpesialis?: string, kodeSubSpesialis?: string) {
+            if (kodeSpesialis) {
+                const spesialis = spesialisData.find(s => s.kode === kodeSpesialis);
+                if (spesialis) {
+                    this.rencanaOperasiData.spesialis = spesialis.id;
+
+                    // Wait for next tick to ensure watch has processed
+                    if (kodeSubSpesialis) {
+                        await nextTick();
+                        const subSpesialis = subSpesialisData.find(s => s.kode === kodeSubSpesialis);
+                        if (subSpesialis) {
+                            this.rencanaOperasiData.subSpesialis = subSpesialis.id;
+                        }
+                    }
+                }
+            }
+        },
+
+        // Reset entire form
+        resetForm() {
+            this.formData = {
+                noRekamMedis: '',
+                noKtp: '',
+                namaPasien: '',
+                jenisKelamin: '',
+                tanggalLahir: '',
+                umur: '',
+                alamat: '',
+                nomorTelepon: []
+            };
+
+            this.diagnosisItems = [];
+            this.tindakanItems = [];
+
+            this.rencanaOperasiData = {
+                spesialis: null,
+                subSpesialis: null,
+                tanggalDaftar: '',
+                kategoriOperasi: null,
+                rencanaOperasi: '',
+                keterangan: ''
+            };
+
+            this.dokterPelaksanaItems = [];
+
+            this.statusPasienData = {
+                tanggalSelesai: '',
+                statusOperasi: 'Belum',
+                keteranganStatus: ''
+            };
+        },
+
+        // Validate form data
+        validateForm(): { valid: boolean; errors: string[] } {
+            const errors: string[] = [];
+
+            // Validate formData
+            if (!this.formData.noRekamMedis) {
+                errors.push('No Rekam Medis');
+            }
+
+            // Validate rencanaOperasiData
+            if (!this.rencanaOperasiData.spesialis) {
+                errors.push('Spesialis');
+            }
+            if (!this.rencanaOperasiData.subSpesialis) {
+                errors.push('Sub Spesialis');
+            }
+            if (!this.rencanaOperasiData.tanggalDaftar) {
+                errors.push('Tanggal Daftar');
+            }
+            if (!this.rencanaOperasiData.kategoriOperasi) {
+                errors.push('Kategori Operasi');
+            }
+
+            // Validate status operasi
+            if (!this.statusPasienData.statusOperasi) {
+                errors.push('Status Operasi');
+            }
+
+            // Conditional validation based on status operasi
+            if (this.statusPasienData.statusOperasi === 'Selesai') {
+                if (!this.statusPasienData.tanggalSelesai) {
+                    errors.push('Tanggal Selesai Operasi (wajib diisi untuk status Selesai)');
+                }
+            }
+
+            if (this.statusPasienData.statusOperasi === 'Tunda' || this.statusPasienData.statusOperasi === 'Batal') {
+                if (!this.statusPasienData.keteranganStatus) {
+                    errors.push('Keterangan Status Pasien (wajib diisi untuk status Tunda/Batal)');
+                }
+            }
+
+            return {
+                valid: errors.length === 0,
+                errors
+            };
+        },
+
+        // Submit form
+        async submitForm() {
+            this.loading = true;
+            try {
+                // API call simulation
+                await new Promise((resolve) => setTimeout(resolve, 1000));
+
+                // Convert to plain object for cleaner logging
+                const submissionData = JSON.parse(JSON.stringify(this.getSubmissionData));
+                console.log('Form is valid : ', submissionData);
+
+                // Show success message
+                this.showSnackbar('Data berhasil disimpan!', 'success');
+
+                return { success: true };
+            } catch (error) {
+                console.error('Error submitting form:', error);
+                this.showSnackbar('Terjadi kesalahan saat menyimpan data!', 'error');
+                return { success: false, error };
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // Show snackbar notification
+        showSnackbar(message: string, color: string = 'error') {
+            this.snackbarMessage = message;
+            this.snackbarColor = color;
+            this.snackbar = true;
+        },
+
+        // Close snackbar
+        closeSnackbar() {
+            this.snackbar = false;
+        }
+    }
+});
diff --git a/utils/module/fhirNameParser.ts b/utils/module/fhirNameParser.ts
index 26682b4..7c386e2 100644
--- a/utils/module/fhirNameParser.ts
+++ b/utils/module/fhirNameParser.ts
@@ -2,8 +2,8 @@
 import type { FhirHumanName } from "~/types/fhir/humanName";
 
 // Indonesian academic suffixes
-import indonesianPrefixes from "~/data/indonesianPrefixes.json";
-import indonesianSuffixes from "~/data/indonesianSuffixes.json";
+import indonesianPrefixes from "~/data/apps/parse/indonesianPrefixes.json";
+import indonesianSuffixes from "~/data/apps/parse/indonesianPrefixes.json";
 const INDONESIAN_PREFIXES: readonly string[] = indonesianPrefixes;
 const INDONESIAN_SUFFIXES: readonly string[] = indonesianSuffixes;