From 8a8e41b4d84e22be593c42337d8850007b446e7d Mon Sep 17 00:00:00 2001 From: raghad Date: Sat, 24 May 2025 02:54:04 +0300 Subject: [PATCH] Updates to the settings interface and restaurant account creation. --- package-lock.json | 33 +++ package.json | 1 + public/images/createProfile/BasicInf.png | Bin 0 -> 841 bytes public/images/createProfile/BusinessHours.png | Bin 0 -> 957 bytes public/images/createProfile/Confirmation.png | Bin 0 -> 599 bytes public/images/createProfile/ContactInf.png | Bin 0 -> 847 bytes public/images/createProfile/Equipment.png | Bin 0 -> 579 bytes public/images/createProfile/MenuUpload.png | Bin 0 -> 1112 bytes public/images/createProfile/Successful.png | Bin 0 -> 4024 bytes .../images/createProfile/TypeOfRestaurant.png | Bin 0 -> 816 bytes public/images/createProfile/UploadPhotos.png | Bin 0 -> 850 bytes .../Authentication/SignUp_In/LoginForm.js | 5 +- src/components/Home/AppBar.js | 5 +- .../RestaurantProfile/RestaurantProfile.js | 112 ++++++-- .../Home/RestaurantProfile/SideProfile.js | 163 +++++++++++ .../contcet/BasicInformation.js | 136 +++++++++ .../contcet/BusinessHours.js | 207 ++++++++++++++ .../contcet/ConfirmationDialog.js | 180 ++++++++++++ .../contcet/ContactInformation.js | 163 +++++++++++ .../RestaurantProfile/contcet/Equipment.js | 163 +++++++++++ .../contcet/LoginRestaurant.js | 261 ++++++++++++++++++ .../contcet/OperationalCapacity.js | 213 ++++++++++++++ .../contcet/TypeOfRestaurant.js | 165 +++++++++++ .../RestaurantProfile/contcet/UploadMenu.js | 240 ++++++++++++++++ .../RestaurantProfile/contcet/UploadPhotos.js | 183 ++++++++++++ .../Home/Settings/AccountSettings.js | 217 +++++++++++++++ src/components/Home/Settings/Setting.js | 92 +++--- 27 files changed, 2464 insertions(+), 75 deletions(-) create mode 100644 public/images/createProfile/BasicInf.png create mode 100644 public/images/createProfile/BusinessHours.png create mode 100644 public/images/createProfile/Confirmation.png create mode 100644 public/images/createProfile/ContactInf.png create mode 100644 public/images/createProfile/Equipment.png create mode 100644 public/images/createProfile/MenuUpload.png create mode 100644 public/images/createProfile/Successful.png create mode 100644 public/images/createProfile/TypeOfRestaurant.png create mode 100644 public/images/createProfile/UploadPhotos.png create mode 100644 src/components/Home/RestaurantProfile/SideProfile.js create mode 100644 src/components/Home/RestaurantProfile/contcet/BasicInformation.js create mode 100644 src/components/Home/RestaurantProfile/contcet/BusinessHours.js create mode 100644 src/components/Home/RestaurantProfile/contcet/ConfirmationDialog.js create mode 100644 src/components/Home/RestaurantProfile/contcet/ContactInformation.js create mode 100644 src/components/Home/RestaurantProfile/contcet/Equipment.js create mode 100644 src/components/Home/RestaurantProfile/contcet/LoginRestaurant.js create mode 100644 src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js create mode 100644 src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js create mode 100644 src/components/Home/RestaurantProfile/contcet/UploadMenu.js create mode 100644 src/components/Home/RestaurantProfile/contcet/UploadPhotos.js create mode 100644 src/components/Home/Settings/AccountSettings.js diff --git a/package-lock.json b/package-lock.json index 08ae0d2..e7896bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.3.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.9.0", "react": "^19.1.0", "react-circular-progressbar": "^2.2.0", "react-dom": "^19.1.0", @@ -5404,6 +5405,32 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz", + "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz", + "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", @@ -14327,6 +14354,12 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + }, "node_modules/psl": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz", diff --git a/package.json b/package.json index fe33f01..77f859f 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.3.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.9.0", "react": "^19.1.0", "react-circular-progressbar": "^2.2.0", "react-dom": "^19.1.0", diff --git a/public/images/createProfile/BasicInf.png b/public/images/createProfile/BasicInf.png new file mode 100644 index 0000000000000000000000000000000000000000..0e84038eeeac909380a0ce8a0597af4e4c3abca5 GIT binary patch literal 841 zcmV-P1GfB$P)+EK$ia+Bif6R!~X>BGnj?t3vmI{tH1tEh5{rDq6H@5omvbid$_gh`@z2 zf!deFSR_PYLn+S8oA*xV-t#_2iB@&t&bxE&IluEeUl;hti~c0!kLZApK{=k2-J)9Z z!)y*EFlOa`k~&fRDZ)cB!S{dh%;Rec)BVb&|p!pQA?=sMI8t{Jsl`p`zNnq_Miz6EZ zslEZrQZH5%a0cTdA5bQu;_fCK9s%0UM|`%fuT$XVdmw*3B+EnrX6XX@$eTjeO(7?7 ziJYxNI&up*a7p=_nAhI}o-l0fPC&mu2MX80QLZ)Itn1b=#2%8g?LPyw_e+S?B=tX* zfQBX@s39&)YY(uii)k$nO|#*`!!B=1F-Rk|^x7|qp@-P9`R?gakf4gX_A$D|t9g~# z0EHn{>A1PK!AieSdanY;XmVN@1$mOMlh?M^yY-k9ia5*+$?6b>l2C`FYN6*;Is^>y zjC|v#h84-9RW1RWns-ZFlpR!1BYEX^?9&M7msrJ#%_Hp#(F%1Qj$co5T#ptDz`AA9Q(78c3mYIz=*e#~6i zu-&UOg9+y@26a+yAS02yH?Zu&P&{1ib<~CqQBk<`Ru=s+5&u_NBQbmVk^zLKD zwSP+(f!LUL&0}3nI1y{|9kxg&5L?T TR(*0A00000NkvXXu0mjfb#HXw literal 0 HcmV?d00001 diff --git a/public/images/createProfile/BusinessHours.png b/public/images/createProfile/BusinessHours.png new file mode 100644 index 0000000000000000000000000000000000000000..24b19cf00242a242562e520d5772b9bb7b3f8ef4 GIT binary patch literal 957 zcmV;u148_XP)Tf{zd}#3U6)^p*eyf0_Y0`hoU-37nkH5nvgadHdwyf7TtS z0bZGy8sKzI0ruP4HUyoQz~dO*DZBo9;g=I9WsMMbx0FeBL9w0MnWmMXPkY-W}8O-F;SIZG3Y&!JIU2@KP64P{BttJm(_)3%x~ z0P9Tss=AePISXp3a>X@VkE1E{{Spo152HBta5V-ub>ZliKcUZtfmi2c?DlM%WRI2z z`iyzZSq@Z%r4(w!gp|Un0O9UsU{S=j_Tj{izo7?75d6JDMUk-t>5mA)hD4m$tCt03O{|Bu69sB!x7q4d(z|ZUj?98H`fex7E3KY+W zmdm7={8?0WiqiGowe5%?O>~pMs_pf9nQy>P>_kKJeem2nDBCu4n!e}l5o^hG4&`Q} zF_=`IHqBEf_+En;t(g{Nl{atbyhI&2LhTR-g%Gh`i4jBNWs*v&&Ct$U);PCE@aFl f8!Dt>zGS`!%IkG;H>eyb00000NkvXXu0mjfbb+t> literal 0 HcmV?d00001 diff --git a/public/images/createProfile/Confirmation.png b/public/images/createProfile/Confirmation.png new file mode 100644 index 0000000000000000000000000000000000000000..2ff894819308c8a91368b151b1d077bf1f62e180 GIT binary patch literal 599 zcmV-d0;v6oP);k@V!;K?6%czz+c1R8#nE%L0Vh zS|l)d{o29QVI>NQvA*^(>Wl?C zn6XAMp~zVAp;^jLwx!KP>s5hcQXY{3?!8=;ZU*f9jC!a^(+6JS^Vmlpf6QOsC7EiV z#qM-CUCnaX{pnj+(`S}v{H<_*4@=C1x?wyY>*%q-x zow9(cyF3_U;=c1~BbP_dkt)MTe4e>I|O;$)(c2N5_A9n002ovPDHLkV1lol1^@s6 literal 0 HcmV?d00001 diff --git a/public/images/createProfile/ContactInf.png b/public/images/createProfile/ContactInf.png new file mode 100644 index 0000000000000000000000000000000000000000..86d11f862bc037e06905c2cd89ffd110690ae949 GIT binary patch literal 847 zcmV-V1F-ywP)yl2WZhz!C>&dt5&-t(RBJNIzd!PnS}`y&Ao$b9~{ku42*Y>5*fJ$w2p``+H(oy7Z;8CbfD+Eph1#h|^hZ2CUcqSndqR zGf`8;)-ng;IoFa6Wc#4wC%f&j*f!b_fsF9>HjfVRaIHjayz}z zG+iGVpLiiEa+Vt$9z#p;G!#V!yW37gk?lWy;W*fAc8rcs;NSr#$194W2mEyy8G8p& zl%TQZ@5L#nw?Bl|=0;>PnL<@Lr=U3)KoO`1x$$vs5j-0b6Ql^nV$(BWl)3lAZg>2Z zOD@uZ(8(x}NF-3<^WiY-Zg^n@bv2bx7&|gaG;(cS9o20K$tA)Krx*6}$oBa=DBg$}Rr7xmjOdXASD?ZTKsDH4ec Z`~k=V8(G6w#b^Kk002ovPDHLkV1jN7e!u_# literal 0 HcmV?d00001 diff --git a/public/images/createProfile/Equipment.png b/public/images/createProfile/Equipment.png new file mode 100644 index 0000000000000000000000000000000000000000..d69c6aec2358b9d30938ad7d32261ff37f63379a GIT binary patch literal 579 zcmV-J0=)f+P)C-MnthvOA*D0U~M`}Qzffr*F+@h zHM$7#M4C-Q1NaS##1zr0qYKITV@3X(;jiKE3?tzly>z=46=OZ&_VQ>%+J6mJcuTIu*%uION5c zIC~V`7xyDnj)qWeN*a}+ILp=kS$2o$-{}&#jqwa}^s*wfp#?Ubh}#*J;Rh}hmpocu R8DIba002ovPDHLkV1k$o?py!> literal 0 HcmV?d00001 diff --git a/public/images/createProfile/MenuUpload.png b/public/images/createProfile/MenuUpload.png new file mode 100644 index 0000000000000000000000000000000000000000..e53304756aaee05d11534edd47597afd1e5400c7 GIT binary patch literal 1112 zcmV-e1gHCnP)JauJ3se$&b?brNjfldXYSnlo$q|-J6FI> zuBCb3Z?F5~QQ+ku(!L3$kFhG5hF%B*Qye}}DsQ$=YzEXCwjG8@9>h=sMs$Y?2o#JP z(S8TsaT$42{ZD-L*G&O0{?I!ngr125)d?0z6M(V+7UKzWk2cdM*8j28piE-+&sQEEVl2%MFZ5nC zk<0?IifhYguGK|)@G)r3J_14YcUbxH2&hy)Bzs2fjgb@>5pb+%eH|O;&iN4QDT101 z%V&DC3X@B;0Nb~{E>_PT1?de!X6sWBT%4y=Id$4>B+|P;k^`D^B9WoB8K`{pwq?53 zkeyVzmNAZIZ_)}lvLwAKbFli;yLi1Ao_~u-4c-M;zCB5Eni-h-G>ju7KmD2;phw^Vzz{|?;ShGA=$qjdiNb7 zKMINl)}NA#(UKOmUlyCXH#;g&E1HlOD0g9*(uSC#X;0gfFMWEX*?RwbPU<#H^bA{V zu@)j_<@Qoh$T~$GN;B;>l81RQ5QwHUg=(`Yci#OZB)UgzpugXF)yk0=7=f;P^Wb%D zf%C^s2x#ig8p=SNmctK~R)}hmC!?zs=olS`j$MyBJvkk89oql+3(&Q9pEb2irCq^X8xUV@VCB?| z;5qArSaQlMr25nihr`mF_vJ+-XAF7I%k-hY`+zWfI2d<0*wlFBZ*=qQ!P?Jdxbnq9 z{MrVQU6knUTo1N^;ri>>XAWkSQ4bOr^*S@Q)+nP<3yr!g e?4SZ{w(nmrzd!Le992930000>oL!KL|*!eq)u4-=ZN{&EYv{WyxhT8zd}G$JLJ7XL zJy6aiZkRZ8%KUX+89Tl59OeR2a8q0|aO%NEAH}0Wxxfz|((@%egzz#Z9JMthG$?dp z$9Lb|`0fa9W+Bc$;&FsbOiS&xk&vk6MPCNaPMH-ne$Np6qA3||Tdke)uXvUij3tsRwSsBG4&t5r;{)^s4=m2xztTHlu6ZtH7_>wkF3Be=Y z9-&eN#*~=7SM?egE6@C^uR(Am+O4*Hhr7;Qo4};W7cL4+%d0gX+z9hF9EKq6c2Sq^ z(~_emrKHMQ-WmD*mZVnglXlntQHtVcn@d&dT^T;Y*0G9+Wk$Plw8m<-oy)(L{6xXA z&w#eTFphT%U)FeT(3{m)TE{A*qoE+=IkNa!kBF<=!wWL!$;J0y&=KpVD01RuzjJ;2 zLO;W;YXBL%h-A)u?VC0e1tsi`X}xFLYij|FZXKQ@b>Pgq&XF%$+QxR^XQYlKV%)iT zL)U+6qoPrySF+#pob?jGC)AC)d~kIi{Cys&=fke z?gfX5N5s8)FKNc;S?A}3FPw8ZbZPDu`crIONXQMI`038bL@VjBSiBfHc5EB?!K!QX za~PB6O8AopI?*_h0J*S9gFj7M$}lCV>#w%H;M*pacJWMqkF_`LTH>3~6M9C#J%tlZ zEMaRKAr9}Y*=)O4Ph=rcQeWu&d|s@n7RBgDO+x#XBK!86jmLUnZq9x$(kpUgVeGOK z()=Hn8n*2fc2UL$-Q&8H{e0;7iojlI z7cfk4IEztZP^eYOER_+^A=0nFsf8EE1t$*+=AZ7p zI9Af0f;Pu}TQLmJM0Vkx@(ov~S*pm^OF!M9O}!`~vHPRmfsuobye9Q`1#Cya&LYhf zfo`0a_s9X}j|GD-X|^~SB8X^eX@c1|6v6r|gmg1NsBzLsSU6O6S%XQ5p1t+M>b~Xb zy(io;v|rFxU)8K3yvpL~DW$B^wsp7vbU2q@a`6CRAN1mpxoOKuezqb$RA?b?T83{C zAPNHHbjhMZ3%U<_1dQDYzE*msfL+ys+C~vJha2nJBiMsni{caG)&6a3*eWaU;ch() zK3${m2c$DVnQ_pXpdr16d{ldW=|YEQ1x*bN5S=1eLK{_xO2Hy4rwQs1Pm~vmP%7LY zxHTf8s}62D7NkX#@tl!QIT~I5_Ea}l%DGyZy<5ooxyEcNyM;d>ogNI<>>=dvM{ms@ z+jMhkSpUtFN3Gn#)Ze%ag`5M&h>){{HW4CE&^tknn(0Q!mWRRT(F_PqY0ok+oE*HI zs^cBjY;!F}*K3wu9S|2ul&Ua&*I^N?f)8P3GEaMxwXQQj$uA|p zA)id&L2Um0;V>~6_51=@OXW~-1RMqA7y_2Euuh=cAO@vp9S9lf4c;b#p}|7~oW3Lw z8Nzd21@8I>x2N}ASCN947`f3fZ=hFn!W@0quqWI+ltwo>I5}NWO=*+pm`tq_@|gWE-*71Z2a47_JF!h&ld^Qgk-X)j~T)j4!>IWcN^rm~LX2Sw6h)`sljyt7A3 zi>{xvRpsUs6zpq4CmDrl4|g^0xvl*!>|LeUs}le+!~43=yZ+~qLSGZ_WX8?a+mB78i{`7d|H zG`9M>>|p`nZ*zobpS8 z8ZdQKdn^qa8TE47lrp$!X+dachWCImIRDO{aIwD*%ckrG(-Z=sA^hy}{*+oPxrsIadV3Lk`Aa0c(swmlrqS;1t0O0j+d6mb>6wYc&_pMiZYWwSr1T$8fk*s1UcG=E$B5 z(f0YVnyrPGO~>}`$eS=|LiXDd)PfkJ%5pG4I@$BTvia;$V|MBcaZ%a-h-BiY{|K>; znwVA&fmQ{P1^~y&Ag5`?X)_{rVlqTW7#d3AVF=`5FeqR-^C;B%1aN-Yl#PNpt)PV) zrt=jza@Y-J_o_s@!{Mq%nK{;%UfokSfiA1q@=4+TW5>&-pkXHW)q8xocdVIfQTp}r zw*MM%$2;8)TsSovDpJFkDu$u=&~G5GW?|9LT0~VSrwLiA#|kx#T)~KdxYGz2cn!_h zr@%u`txGMhs@I}9BLVUVU#i42NPqhWoXQUu8AmC!auZunYj@pDP`Sy#grsUf* z+^%YAnHHiS;oYN)&;CP2EAM|FNgS*iocvkew4H0;gpwEGsMR5EN-1LE{|r;3Hxvra z1*cSUP-`i$M)6A^c+sn(8n)E`1eevs#JmxFnx&wmxTDuM#+WUxTkM?smw*8@qJtb%e<}u?$|mH7L8(1)^avy2XAE zp^?IAlyH-@Ddjr71V;lxK?8z#Lmu`WWHDz^m!ZJwm1jt9aW(vm414u@&7QAPuf%(f0Yx%+Jzjo7d>Gw98;&1G%xTA5j6dP(ZZa0 zgX~-Top`gPkuh65PQ9_cQMchp{!|Lr_D>M0$jLt_qZvo5a{tW<%2Y2@-K`8dCpN;~ z9?s=^(w_tGtZQR-wzK7QJpR>cC;TW z0lIy@xXv2;)CiD!N}3fIdW4rjDVNi_%0T09Mfw+CL5o0W4NiEu%UyXmwQz@6QGT2? zvE?_uPR)BVEyq^b3E0ER{ZsZt__%+AT5H=p+{hl|Ce~HfB0pmt`t_rq>YM>IT4hkF zw#0K~#7Fos`Q@ z6Hye#f72I5Dk2sI1+0QZV*(hBVP{B8WT$RPRB-1C-M9tTF2uip{s*FQ;ZjUYlz`Tl zn3RVt@@Q*oQ)wCcV(OV`>4O$y_>wzw&pC6yIrqEg9)%jneW3}B5lq|=v!5I;BcR}s zr(a^Pl&iRFtyQYX=D8z8(=u)1-|)+iCifGY_GR{5JTL!)OovO-nU*!YTZd-AH*vjd!u5woz9fHteK& zntG97BWvfGDN+&=S{>e5FJND?4<2A7pVd#laT1oW!hm~mrH<7n1F=LXu>qali;#TAYH${+0R0v!0 zgffq;1Z6L$jI6enRU*qlvWxX4svLghK5moT!I)$@S`1tef&1dnC5O-`g{_JX;V7~7 zD4KpQjtq@MNt}cASZ;>Ovzyc(rRK1}lvrbip`V4X@LrNKowu^_$;+8x2VCEz3YxUB z2l>WQ(GP`mLOkPDq`H>s4zzAl122?&Jl->^8*Kh=>!hv<(y9-QW-uybGv#iD17Hxt uZ6WKI+RT$HMwj-;m}M8YGFo<+1^fjGOb6$4$CF_lE z_f*9v74MUnwP}3v?J(0(9{=^X|QUQs8i2H_cw3SCN|1&Y8@zu)F1RH;3!f?uD3AB#Zkg!_nXbLk&L&J)!zwc1EB`x$f5TnA>Z zfxCs}+IOIP05tv-{Q4g7^_@F8Ljw%q6%3)}s3Eu5+etQ@necWKRW3gaEU120e%9QF z+Zk%RO30ya1vKF@9JRAIK*M4e?}stE`|RMIT|{GdN@>&z4KrA$gkH_To@F|68Z>&{ zblE=y5(^AsjK@X@M@Qs_d2jxKVIHzo30YK@sWGIkehF{N*aTgIiI3kr78>Z%lkVrm}yu8db{;3puo#c1o6B6_*|?FW#aS>fGGm zeCBbyY2}8D*BNtcW1mn_v&)OK62Ws>Uo9#$o4_Mtn)J@Ky99byFm<$9(Ie$Q(d_}f cz_gD40W*EPAW@;ORR91007*qoM6N<$g8zholmGw# literal 0 HcmV?d00001 diff --git a/src/components/Authentication/SignUp_In/LoginForm.js b/src/components/Authentication/SignUp_In/LoginForm.js index ee7b8a3..a372f76 100644 --- a/src/components/Authentication/SignUp_In/LoginForm.js +++ b/src/components/Authentication/SignUp_In/LoginForm.js @@ -191,6 +191,7 @@ const LoginForm = () => { fullWidth onClick={handleLogin} sx={{ + fontFamily: 'PlusJakartaSans' , fontWeight: 600, fontSize: { xs: '14px', sm: '16px' }, height: { xs: '45px', sm: '52px' }, @@ -210,7 +211,7 @@ const LoginForm = () => { {/* Divider */} - + Or @@ -233,6 +234,7 @@ const LoginForm = () => { borderColor: 'black', backgroundColor: 'transparent' } + , fontFamily: 'PlusJakartaSans' }} > @@ -262,6 +264,7 @@ const LoginForm = () => { borderColor: 'black', backgroundColor: 'transparent' } + , fontFamily: 'PlusJakartaSans' }} > diff --git a/src/components/Home/AppBar.js b/src/components/Home/AppBar.js index b4ca373..4dc6987 100644 --- a/src/components/Home/AppBar.js +++ b/src/components/Home/AppBar.js @@ -87,7 +87,7 @@ const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => { ) : ( { display: { xs: 'none', sm: 'none', md: 'flex' }, // هذا السطر يخفي الزر عند xs و sm ويظهره من md وما فوق color: 'white', height: { xs: 32, sm: 36, md: 40 }, - mr: { xs: '6px', sm: '8px', md: '10px' }, + mr: { xs: '6px', sm: '8px', md: '0px' }, backgroundColor: '#61677F', borderRadius: '8px', fontWeight: 600, @@ -147,7 +147,6 @@ const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => { sx={{ height: { xs: 30, sm: 36, md: 40 }, alignSelf: 'center', - mx: 1 // إضافة هامش أفقي إذا لزم الأمر }} /> )} diff --git a/src/components/Home/RestaurantProfile/RestaurantProfile.js b/src/components/Home/RestaurantProfile/RestaurantProfile.js index 020a5b9..b5ba92f 100644 --- a/src/components/Home/RestaurantProfile/RestaurantProfile.js +++ b/src/components/Home/RestaurantProfile/RestaurantProfile.js @@ -1,34 +1,50 @@ import React, { useState, useEffect } from 'react'; -import { Box, useTheme, useMediaQuery, Typography } from '@mui/material'; +import { Box, useTheme, useMediaQuery } from '@mui/material'; import KitchPlusAppBar from '../AppBar'; import Sidebar from '../SideHome'; +import LoginRestaurant from './contcet/LoginRestaurant'; +import BasicInformation from './contcet/BasicInformation'; +import ContactInformation from './contcet/ContactInformation'; +import BusinessHours from './contcet/BusinessHours'; +import UploadMenu from './contcet/UploadMenu'; +import Equipment from './contcet/Equipment'; +import TypeOfRestaurant from './contcet/TypeOfRestaurant'; +import OperationalCapacity from './contcet/OperationalCapacity'; +import UploadPhotos from './contcet/UploadPhotos'; +import SideProfile from './SideProfile'; const drawerWidth = 230; const RestaurantProfile = () => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); - const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات + const [hasProducts, setHasProducts] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(!isMobile); - // محاكاة للتحقق من وجود المنتجات (استبدل هذا بمنطقك الفعلي) + // ⬇️ إدارة الخطوة الحالية + const [currentStep, setCurrentStep] = useState(0); + + const steps = [ + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep - 1)} />, + ]; + useEffect(() => { - // هنا يجب استبدال هذا بمنطق فعلي للتحقق من وجود المنتجات - // مثلاً استدعاء API أو التحقق من state const checkProducts = async () => { - // محاكاة لاستدعاء API - const productsExist = await checkIfProductsExist(); // استبدل هذه الدالة بمنطقك الفعلي + const productsExist = await checkIfProductsExist(); setHasProducts(productsExist); }; - checkProducts(); }, []); - // دالة مساعدة لمحاكاة التحقق من المنتجات (استبدلها بمنطقك الفعلي) const checkIfProductsExist = async () => { - // محاكاة - يمكن أن يكون هذا استدعاء لـ API أو تحقق من state - // return true; - return false; // غير هذه القيمة حسب منطقك + return false; }; useEffect(() => { @@ -50,7 +66,6 @@ const RestaurantProfile = () => { handleResize(); window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); }, [theme.breakpoints.values.md]); @@ -76,16 +91,8 @@ const RestaurantProfile = () => { flexGrow: 1, display: 'flex', flexDirection: 'column', - width: { - xs: '100%', - sm: '100%', - md: '100%' - }, - marginLeft: { - xs: 0, - sm: sidebarOpen ? `${drawerWidth}px` : 0, - md: 0 - }, + width: { xs: '100%', sm: '100%', md: '100%' }, + marginLeft: { xs: 0, sm: sidebarOpen ? `${drawerWidth}px` : 0, md: 0 }, transition: theme.transitions.create(['width'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, @@ -96,10 +103,65 @@ const RestaurantProfile = () => { sidebarOpen={sidebarOpen} isMobile={isMobile} /> - RestaurantProfile + + + + + + setCurrentStep(prev => Math.max(prev - 1, 0))} + /> + + + + + + + + {steps[currentStep]} + + + + ); }; -export default RestaurantProfile; \ No newline at end of file +export default RestaurantProfile; diff --git a/src/components/Home/RestaurantProfile/SideProfile.js b/src/components/Home/RestaurantProfile/SideProfile.js new file mode 100644 index 0000000..e7508c0 --- /dev/null +++ b/src/components/Home/RestaurantProfile/SideProfile.js @@ -0,0 +1,163 @@ +import React from 'react'; +import { Box, Typography, Stack, Button, useTheme } from '@mui/material'; +import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; + +const steps = [ + { title: 'Basic Information', icon: '/images/createProfile/BasicInf.png' }, + { title: 'Contact Information', icon: '/images/createProfile/ContactInf.png' }, + { title: 'Business Hours', icon: '/images/createProfile/BusinessHours.png' }, + { title: 'Menu Upload', icon: '/images/createProfile/MenuUpload.png' }, + { title: 'Available Equipment', icon: '/images/createProfile/equipment.png' }, + { title: 'Operational Capacity', icon: '/images/icons/rocket.png' }, + { title: 'Type of Restaurant', icon: '/images/createProfile/TypeOfRestaurant.png' }, + { title: 'Upload Photos', icon: '/images/createProfile/UploadPhotos.png' }, + { title: 'Submit & Confirmation', icon: '/images/createProfile/Confirmation.png' }, +]; + +const SideProfile = ({ currentStepIndex = 0, onBack }) => { + const theme = useTheme(); + + return ( + + {/* العنوان الرئيسي */} + + Restaurant Registration Flow + + + Complete this process to register your restaurant on our amazing food platform. + + + {/* الخطوات */} + + {steps.map((step, index) => ( + + {/* الخط الرأسي بين الدوائر */} + {index !== steps.length - 1 && ( + + )} + + {/* محتوى كل خطوة */} + + {/* الدائرة بالأيقونة */} + + {/* الدائرة الخلفية - تظهر دائمًا */} + + + {/* الدائرة الأمامية بالأيقونة */} + + {step.title} + + + + {/* العنوان */} + + {step.title} + + + + ))} + + + {/* زر الرجوع */} + + + + + ); +}; + +export default SideProfile; diff --git a/src/components/Home/RestaurantProfile/contcet/BasicInformation.js b/src/components/Home/RestaurantProfile/contcet/BasicInformation.js new file mode 100644 index 0000000..19eb41c --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/BasicInformation.js @@ -0,0 +1,136 @@ +import React from 'react'; +import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material'; + +const BasicInformation = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + + return ( + + + + Basic Information + + + + Enter your basic information to proceed to registration of your own restaurant on this platform + + + + {/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */} + {[ + { label: 'Restaurant Name', placeholder: 'Al-Baik Foods' }, + { label: 'Restaurant Type', placeholder: 'Fast Food' }, + { label: 'Address', placeholder: 'Ward # 13' }, + { label: 'City', placeholder: 'Jordan' }, + { label: 'Postal Code', placeholder: '31200' }, + ].map((field, index) => ( + + + {field.label} + + + + ))} + + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +export default BasicInformation; diff --git a/src/components/Home/RestaurantProfile/contcet/BusinessHours.js b/src/components/Home/RestaurantProfile/contcet/BusinessHours.js new file mode 100644 index 0000000..8341452 --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/BusinessHours.js @@ -0,0 +1,207 @@ +import React, { useState } from 'react'; +import { + Box, + Typography, + Stack, + Button, + useTheme, + TextField, + Checkbox, + FormGroup, + FormControlLabel +} from '@mui/material'; + +const BusinessHours = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + + const [selectedDays, setSelectedDays] = useState([]); + + const handleCheckboxChange = (day) => { + setSelectedDays((prev) => + prev.includes(day) + ? prev.filter((d) => d !== day) + : [...prev, day] + ); + }; + + const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; + + return ( + + + + Business Hours + + + + + Enter your business hours to proceed to registration of your own restaurant on this platform + + + + {/* Operational Hours Input */} + + + Operational Hours + + + + + {/* Checkboxes for Days of the Week */} + + + Closed Days + + + {days.map((day) => { + const isChecked = selectedDays.includes(day); + return ( + handleCheckboxChange(day)} + sx={{ + transform: 'scale(1.5)', + color: '#F0EDED', + '&.Mui-checked': { + color: '#FF914D', + }, + }} + /> + } + label={ + + {day} + + } + sx={{ + m: 0, + width: { xs: '45%', sm: '30%', md: '22%' }, + }} + /> + ); + })} + + + + {/* Next Button */} + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +export default BusinessHours; diff --git a/src/components/Home/RestaurantProfile/contcet/ConfirmationDialog.js b/src/components/Home/RestaurantProfile/contcet/ConfirmationDialog.js new file mode 100644 index 0000000..ed1108a --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/ConfirmationDialog.js @@ -0,0 +1,180 @@ +import React from 'react'; +import { + Dialog, + DialogTitle, + DialogContent, + DialogContentText, + DialogActions, + Button, + Box, + Typography, + useTheme, + Divider +} from '@mui/material'; +import EditIcon from '@mui/icons-material/Edit'; +const ConfirmationDialog = ({ open, onClose, onConfirm }) => { + const theme = useTheme(); + return ( + + + + {/* الدوائر */} + + {/* الدائرة الخلفية */} + + + {/* الدائرة الأمامية مع الأيقونة */} + + Success icon + + + + {/* العنوان بجانب الدائرة */} + + + Register successful! + + + + + + Congratulations! you have registered your restaurant successfully on our platform + + + + + {/* الزر الأول - Filled */} + + + {/* الزر الثاني - Outlined + أيقونة Edit */} + + + + + ); +}; + +export default ConfirmationDialog; \ No newline at end of file diff --git a/src/components/Home/RestaurantProfile/contcet/ContactInformation.js b/src/components/Home/RestaurantProfile/contcet/ContactInformation.js new file mode 100644 index 0000000..c78229c --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/ContactInformation.js @@ -0,0 +1,163 @@ +import React from 'react'; +import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material'; + +const ContactInformation = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + + const handleNext = () => { + if (onNext) { + onNext(); + } + }; + + return ( + + + + Contact Information + + + + Enter your contact information to proceed to registration of your own restaurant on this platform + + + + {/* Phone Number Input */} + + + Phone Number + + + + + {/* Email Input */} + + + Email + + + + {/* Next Button */} + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +export default ContactInformation; diff --git a/src/components/Home/RestaurantProfile/contcet/Equipment.js b/src/components/Home/RestaurantProfile/contcet/Equipment.js new file mode 100644 index 0000000..5aa3c55 --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/Equipment.js @@ -0,0 +1,163 @@ +import React from 'react'; +import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material'; +import AddIcon from '@mui/icons-material/Add'; +import { useNavigate } from 'react-router-dom'; + +const Equipment = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + const navigate = useNavigate(); + + const handleNext = () => { + if (onNext) onNext(); + else navigate('/dashboard'); + }; + + return ( + + + + Equipment + + + + + Enter your kitchen equipment details to complete your restaurant registration. + + + + {/* Oven Input */} + + + {/* Grill Input */} + + + {/* Refrigerators Input */} + + + {/* Add More Equipment Button */} + + + + + {/* Next Button */} + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +// مكون فرعي لتقليل التكرار في الحقول +const InputField = ({ label, placeholder, theme }) => ( + + + {label} + + + +); + +export default Equipment; diff --git a/src/components/Home/RestaurantProfile/contcet/LoginRestaurant.js b/src/components/Home/RestaurantProfile/contcet/LoginRestaurant.js new file mode 100644 index 0000000..8c91a08 --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/LoginRestaurant.js @@ -0,0 +1,261 @@ +import React, { useState } from 'react'; +import { TextField, Button, Typography, Stack, Box, IconButton, InputAdornment } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; +import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined'; +import { VisibilityOutlined } from '@mui/icons-material'; +import { useNavigate } from 'react-router-dom'; +import { Link } from 'react-router-dom'; + + +const LoginForm = () => { + + const navigate = useNavigate(); + const theme = useTheme(); + const [showPassword, setShowPassword] = useState(false); + + const handleTogglePassword = () => { + setShowPassword((prev) => !prev); + }; + const handleLogin = () => { + // بعد تنفيذ عملية تسجيل الدخول بنجاح، يتم التوجيه + navigate('/dashboard'); + }; + return ( + + + + + {/* Login Content */} + + + + + + + + Login + + + + Enter your username and password to access your account securely. Welcome back to our service! + + + {/* Email Input */} + + + Email + + + + + {/* Password Input */} + + + Password + + + + {showPassword ? : } + + + ) + }} + /> + + + {/* Login Button */} + + + + + {/* Divider */} + + + + Or + + + + + {/* Google Button */} + + + + + + {/* Register Link */} + + Don’t have an account?{' '} + + Register + + + + + + + + + ); +}; + +export default LoginForm; diff --git a/src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js b/src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js new file mode 100644 index 0000000..8d10217 --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js @@ -0,0 +1,213 @@ +import React from 'react'; +import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material'; + +const OperationalCapacity = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + + return ( + + + + Operational Capacity + + + + Enter your basic information to proceed to registration of your own restaurant on this platform + + + + {/* Maximum Orders Per Day Input */} + + + Maximum Orders Per Day + + + + + {/* Number of Cheff Input */} + + + Number of Cheff + + + + + {/* Number of Waiters Input */} + + + Number of Waiters + + + + + {/* Number of Kitchen Assistant Input */} + + + Number of Kitchen Assistant + + + + + {/* Buttons */} + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +export default OperationalCapacity; diff --git a/src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js b/src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js new file mode 100644 index 0000000..3c01e7f --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js @@ -0,0 +1,165 @@ +// TypeOfRestaurant.jsx +import React from 'react'; +import { + Box, + Typography, + Stack, + Button, + useTheme, + TextField +} from '@mui/material'; + +const TypeOfRestaurant = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + + return ( + + + {/* العنوان */} + + Type of Restaurant + + + {/* الوصف */} + + + Enter your restaurant type you want to collaborate to proceed to registration of your own restaurant on this platform + + + + {/* الحقول */} + + + Open to Host Restaurant/Cousin type* + + + + + + + Select Restaurant type Willing to Collaborate With + + + + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +export default TypeOfRestaurant; diff --git a/src/components/Home/RestaurantProfile/contcet/UploadMenu.js b/src/components/Home/RestaurantProfile/contcet/UploadMenu.js new file mode 100644 index 0000000..2d012c2 --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/UploadMenu.js @@ -0,0 +1,240 @@ +import React from 'react'; +import { + Box, + Typography, + Stack, + Button, + useTheme, + TextField +} from '@mui/material'; +import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; + +const UploadMenu = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + + return ( + + + + Upload Menu + + + + + Enter your basic information to proceed to registration of your own restaurant on this platform + + + + {/* Item Name Input */} + + + Item Name + + + + + {/* Price Input */} + + + Price + + + + + {/* Description Input */} + + + Description + + + + + {/* OR Separator */} + + + + + OR + + + + + {/* Upload Menu Picture */} + + Upload Menu Picture + + + + + {/* Buttons: Back and Next */} + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +export default UploadMenu; diff --git a/src/components/Home/RestaurantProfile/contcet/UploadPhotos.js b/src/components/Home/RestaurantProfile/contcet/UploadPhotos.js new file mode 100644 index 0000000..449be11 --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/UploadPhotos.js @@ -0,0 +1,183 @@ +import React, { useState } from 'react'; +import { + Box, + Typography, + Stack, + Button, + useTheme +} from '@mui/material'; +import { useNavigate } from 'react-router-dom'; +import ConfirmationDialog from './ConfirmationDialog'; // ✅ استدعاء المودال المنفصل + +const UploadPhotos = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + const navigate = useNavigate(); + const [openModal, setOpenModal] = useState(false); + + const handleOpenModal = () => setOpenModal(true); + const handleCloseModal = () => setOpenModal(false); + const handleConfirmNext = () => { + handleCloseModal(); + onNext(); + }; + + return ( + + + + Upload Photos + + + + + Enter your basic information to proceed to registration of your own restaurant on this platform + + + + {/* Kitchen Interior’s */} + + + Kitchen Interior’s + + + + Upload Interior Picture + + + + + + {/* Kitchen Equipment’s */} + + + Kitchen Equipment’s + + + + Upload Equipment Picture + + + + + + {/* Buttons */} + + + + + + + + {/* ✅ Confirmation Modal */} + + + ); +}; + +export default UploadPhotos; diff --git a/src/components/Home/Settings/AccountSettings.js b/src/components/Home/Settings/AccountSettings.js new file mode 100644 index 0000000..fd07243 --- /dev/null +++ b/src/components/Home/Settings/AccountSettings.js @@ -0,0 +1,217 @@ +import React, { useState } from 'react'; +import { + Box, + Typography, + TextField, + Button, + styled, + useTheme +} from '@mui/material'; +import AddAPhotoOutlinedIcon from '@mui/icons-material/AddAPhotoOutlined'; + +const AccountSettings = () => { + const theme = useTheme(); + const [profileImage, setProfileImage] = useState(null); + const [fullName, setFullName] = useState(''); + const [username, setUsername] = useState(''); + const [bio, setBio] = useState(''); + const [email, setEmail] = useState(''); + const [phone, setPhone] = useState(''); + + const handleImageUpload = (event) => { + if (event.target.files && event.target.files[0]) { + setProfileImage(URL.createObjectURL(event.target.files[0])); + } + }; + + const Input = styled('input')({ + display: 'none', + }); + + const customInputStyle = { + '& input': { fontWeight: 500, fontSize: '15px' }, + '& input::placeholder': { color: '#969BA7' }, + '& .MuiOutlinedInput-root': { + borderRadius: '10px', + transition: '0.3s', + '&.Mui-focused fieldset': { + borderColor: theme.palette.primary.main, + boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)', + }, + }, + '& .MuiOutlinedInput-root.Mui-focused': { + borderColor: '#3f51b5', + boxShadow: '0 0 0 2px rgba(63,81,181,0.1)', + }, + }; + + const renderField = (label, value, onChange, type = 'text') => ( + + + {label} + + + + ); + + return ( + + {/* العنوان الرئيسي */} + + Account Setting + + + {/* صورة الملف الشخصي */} + + Your Profile Picture + + + + + + + {/* الحقول النصية */} + + + Personal Information + + + {/* السطر الأول: Full Name + Email */} + + {renderField('Full Name', fullName, (e) => setFullName(e.target.value))} + {renderField('Email', email, (e) => setEmail(e.target.value), 'email')} + + + {/* السطر الثاني: Username + Phone Number */} + + {renderField('Username', username, (e) => setUsername(e.target.value))} + {renderField('Phone Number', phone, (e) => setPhone(e.target.value), 'tel')} + + + {/* الحقل Bio منفصل */} + + + Bio + + setBio(e.target.value)} + fullWidth + multiline + rows={3} + sx={customInputStyle} + /> + + + + {/* الأزرار */} + + + + + + ); +}; + +export default AccountSettings; diff --git a/src/components/Home/Settings/Setting.js b/src/components/Home/Settings/Setting.js index e717d83..a6aa6a2 100644 --- a/src/components/Home/Settings/Setting.js +++ b/src/components/Home/Settings/Setting.js @@ -1,32 +1,16 @@ import React, { useState, useEffect } from 'react'; -import { Box, useTheme, useMediaQuery, Typography } from '@mui/material'; +import { Box, useTheme, useMediaQuery } from '@mui/material'; import KitchPlusAppBar from '../AppBar'; import Sidebar from '../SideHome'; +import AccountSettings from './AccountSettings'; const drawerWidth = 230; const Setting = () => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); - const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات const [sidebarOpen, setSidebarOpen] = useState(!isMobile); - - useEffect(() => { - const checkProducts = async () => { - - const productsExist = await checkIfProductsExist(); - setHasProducts(productsExist); - }; - - checkProducts(); - }, []); - - - const checkIfProductsExist = async () => { - return false; - }; - useEffect(() => { if (window.innerWidth >= theme.breakpoints.values.md) { setSidebarOpen(true); @@ -55,47 +39,63 @@ const Setting = () => { }; return ( - + - - + - Setting + + + + + ); }; -export default Setting; \ No newline at end of file +export default Setting;