diff options
Diffstat (limited to 'src')
76 files changed, 10457 insertions, 0 deletions
diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..e436ecc --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,118 @@ +import NavBar from '@/views/components/NavBar' +import { Button, Snackbar, Typography, useColorScheme } from '@mui/joy' +import { useEffect, useState } from 'react' +import { Outlet } from 'react-router-dom' +import { useRegisterSW } from 'virtual:pwa-register/react' +import { UserContext } from './contexts/UserContext' +import { AuthenticationProvider } from './service/AuthenticationService' +import { GetUserProfile } from './utils/Fetcher' +import { isTokenValid } from './utils/TokenManager' + +const add = className => { + document.getElementById('root').classList.add(className) +} + +const remove = className => { + document.getElementById('root').classList.remove(className) +} +// TODO: Update the interval to at 60 minutes +const intervalMS = 5 * 60 * 1000 // 5 minutes + +function App() { + const { mode, systemMode } = useColorScheme() + const [userProfile, setUserProfile] = useState(null) + const [showUpdateSnackbar, setShowUpdateSnackbar] = useState(true) + + const { + offlineReady: [offlineReady, setOfflineReady], + needRefresh: [needRefresh, setNeedRefresh], + updateServiceWorker, + } = useRegisterSW({ + onRegistered(r) { + // eslint-disable-next-line prefer-template + console.log('SW Registered: ' + r) + r && + setInterval(() => { + r.update() + }, intervalMS) + }, + onRegisterError(error) { + console.log('SW registration error', error) + }, + }) + const close = () => { + setOfflineReady(false) + setNeedRefresh(false) + } + + // const updateServiceWorker = useRegisterSW({ + // onRegistered(r) { + // r && + // setInterval(() => { + // r.update() + // }, intervalMS) + // }, + // }) + const setThemeClass = () => { + const value = JSON.parse(localStorage.getItem('themeMode')) || mode + + if (value === 'system') { + if (systemMode === 'dark') { + return add('dark') + } + return remove('dark') + } + + if (value === 'dark') { + return add('dark') + } + + return remove('dark') + } + const getUserProfile = () => { + GetUserProfile() + .then(res => { + res.json().then(data => { + setUserProfile(data.res) + }) + }) + .catch(error => {}) + } + useEffect(() => { + setThemeClass() + }, [mode, systemMode]) + useEffect(() => { + if (isTokenValid()) { + if (!userProfile) getUserProfile() + } + }, []) + + return ( + <div className='min-h-screen'> + <AuthenticationProvider /> + <UserContext.Provider value={{ userProfile, setUserProfile }}> + <NavBar /> + <Outlet /> + </UserContext.Provider> + {needRefresh && ( + <Snackbar open={showUpdateSnackbar}> + <Typography level='body-md'> + A new version is now available.Click on reload button to update. + </Typography> + <Button + color='secondary' + size='small' + onClick={() => { + updateServiceWorker(true) + setShowUpdateSnackbar(false) + }} + > + Refresh + </Button> + </Snackbar> + )} + </div> + ) +} + +export default App diff --git a/src/Config.js b/src/Config.js new file mode 100644 index 0000000..19a896b --- /dev/null +++ b/src/Config.js @@ -0,0 +1,5 @@ +/* eslint-env node */ +export const API_URL = import.meta.env.VITE_APP_API_URL //|| 'http://localhost:8000' +export const REDIRECT_URL = import.meta.env.VITE_APP_REDIRECT_URL //|| 'http://localhost:3000' +export const GOOGLE_CLIENT_ID = import.meta.env.VITE_APP_GOOGLE_CLIENT_ID +export const ENVIROMENT = import.meta.env.VITE_APP_ENVIROMENT diff --git a/src/Logo.jsx b/src/Logo.jsx new file mode 100644 index 0000000..664c607 --- /dev/null +++ b/src/Logo.jsx @@ -0,0 +1,9 @@ +import LogoSVG from '@/assets/logo.svg' +const Logo = () => { + return ( + <div className='logo'> + <img src={LogoSVG} alt='logo' width='128px' height='128px' /> + </div> + ) +} +export default Logo diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..f205a47 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,1185 @@ +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="100%" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve"> + +<path fill="#B5BEFB" opacity="1.000000" stroke="none" + d=" +M457.067200,42.686905 + C459.447144,26.832342 469.528015,16.203293 481.577301,7.055771 + C484.583862,4.773226 488.270081,3.385903 491.321960,1.293556 + C503.687561,1.000000 516.375122,1.000000 529.531372,1.000004 + C532.877991,2.985393 535.601196,5.258084 538.660706,6.906528 + C552.035889,14.112956 561.123352,24.814444 565.647583,39.326729 + C566.080750,40.716061 566.044800,42.251637 566.534424,44.416672 + C566.269714,53.474617 565.697205,61.835217 565.124695,70.195816 + C562.884399,82.024635 556.006897,90.798393 546.797058,98.042542 + C545.892578,98.753990 545.048767,99.542503 543.702881,100.681946 + C542.668823,101.562706 542.108643,102.056770 540.874512,103.145233 + C543.896545,103.378769 546.007507,103.627136 548.124084,103.692657 + C579.398621,104.660835 610.777283,101.454941 641.961609,106.044365 + C641.961609,106.044365 641.997559,106.000000 642.232666,106.281258 + C643.636841,106.730606 644.805908,106.898689 645.975037,107.066772 + C645.975037,107.066772 646.399109,107.196709 646.814575,107.547272 + C648.802185,108.297722 650.374390,108.697617 651.946533,109.097511 + C651.946533,109.097511 652.334167,109.251457 652.673218,109.635696 + C655.649536,111.048347 658.286804,112.076759 660.924011,113.105164 + C660.924011,113.105164 661.338745,113.293716 661.638184,113.612358 + C662.257812,113.993759 662.577942,114.056519 662.898132,114.119278 + C662.898132,114.119278 663.313416,114.351051 663.616821,114.670654 + C663.920227,114.990265 664.358093,115.225540 664.358093,115.225540 + C664.358093,115.225540 664.843811,115.120506 664.843811,115.120506 + C664.843811,115.120506 664.924805,115.072365 664.949219,115.443268 + C665.933105,116.254326 666.892517,116.694481 667.851990,117.134628 + C667.851990,117.134621 667.947266,117.053314 667.981079,117.440826 + C669.021606,118.253540 670.028381,118.678749 671.271301,119.170792 + C671.824585,119.286629 672.140808,119.341209 672.622070,119.696716 + C679.759644,127.731895 687.501282,134.920029 693.530396,143.335159 + C703.686951,157.510941 709.115906,173.618210 708.473145,191.277771 + C681.710510,191.293823 655.410950,191.385529 629.111389,191.401764 + C529.069275,191.463501 429.027130,191.500854 328.965271,191.124725 + C330.406860,167.369614 339.520386,147.529587 356.163544,131.138840 + C359.916351,127.442932 363.727966,123.806702 367.806641,120.045158 + C369.087769,118.981110 370.074799,118.014900 371.061859,117.048691 + C371.061859,117.048691 371.013489,116.999557 371.355469,117.107140 + C371.996918,116.890915 372.296387,116.567116 372.595886,116.243324 + C372.595886,116.243332 372.563263,116.098564 373.016327,116.232864 + C373.845886,115.978600 374.222382,115.590034 374.598877,115.201477 + C374.598877,115.201469 374.529510,115.009590 374.926147,115.148865 + C375.885895,114.907318 376.448944,114.526497 377.012024,114.145676 + C383.126526,111.437981 389.241028,108.730270 396.026550,106.213028 + C424.273346,100.114319 452.383545,104.830887 480.419342,102.608955 + C479.972687,101.906181 479.796143,101.424187 479.455841,101.134781 + C478.702362,100.494049 477.866638,99.950081 477.064423,99.366669 + C472.619659,94.664429 467.385376,90.467857 463.956818,85.114799 + C460.664032,79.973732 459.242096,73.634453 456.975769,66.983047 + C456.991394,58.325230 457.029297,50.506069 457.067200,42.686905 +M495.040314,43.670990 + C486.376251,56.938816 493.815094,72.260345 507.730530,74.933403 + C517.515564,76.813034 529.649231,68.062172 531.328369,59.447845 + C532.796204,51.917713 530.302063,46.677364 526.017822,41.704769 + C518.169128,32.594967 503.036163,33.744705 495.040314,43.670990 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M367.512543,120.143005 + C363.727966,123.806702 359.916351,127.442932 356.163544,131.138840 + C339.520386,147.529587 330.406860,167.369614 328.768921,191.520508 + C328.478699,198.661301 328.300964,204.983322 328.263184,211.306168 + C328.132141,233.240723 334.086792,239.255035 355.925262,239.252853 + C463.741425,239.242065 571.557556,239.221786 679.373718,239.197357 + C683.039307,239.196518 686.712097,239.247787 690.369019,239.046799 + C700.273621,238.502396 708.806946,230.141632 709.049622,220.303772 + C709.287842,210.648895 708.995605,200.980957 708.936157,191.318741 + C709.115906,173.618210 703.686951,157.510941 693.530396,143.335159 + C687.501282,134.920029 679.759644,127.731895 673.147339,119.643036 + C691.453796,119.205421 709.400879,119.116837 727.348022,119.028259 + C743.718384,119.185036 759.522888,122.356789 774.749939,128.267838 + C786.922852,132.993240 797.822937,139.913391 808.099548,148.875977 + C808.958862,149.589859 809.502563,149.758560 810.046326,149.927246 + C810.046326,149.927246 810.021057,149.975540 810.086792,150.276672 + C810.779724,151.029556 811.406799,151.481308 812.033936,151.933075 + C812.033936,151.933060 812.019409,151.965164 812.138550,152.173523 + C812.441711,152.643311 812.684631,152.826950 812.986328,152.932816 + C812.986328,152.932816 813.059509,152.936432 813.168884,153.175323 + C813.468811,153.665741 813.713806,153.841400 814.013184,153.941177 + C814.013184,153.941177 814.051208,153.950363 814.088745,154.311172 + C818.032654,158.893280 821.994446,163.064835 825.836121,167.344177 + C846.403625,190.254852 856.329895,217.527451 856.795593,247.912750 + C857.175781,272.717957 857.808350,297.541016 854.362427,322.368683 + C852.379761,336.653229 853.979675,351.360748 856.036316,365.862640 + C857.653748,377.267303 859.067017,388.958374 853.599670,400.041992 + C852.912598,401.434784 852.977539,403.305450 853.038879,404.941803 + C853.287476,411.573303 853.994141,418.202515 853.938171,424.827576 + C853.815247,439.383301 853.345520,453.936340 852.972229,468.489319 + C852.938599,469.801819 852.610535,471.112061 852.363953,472.412842 + C850.920166,480.029877 848.397461,487.615387 848.193176,495.263733 + C847.398071,525.033203 847.340332,554.822327 846.994141,584.603882 + C846.972412,586.474854 846.830505,588.344421 846.744507,590.214600 + C846.145996,590.232544 845.547485,590.250549 844.948975,590.268494 + C844.658142,587.152283 844.109802,584.033447 844.141357,580.920532 + C844.181458,576.954102 844.996338,572.987915 844.935974,569.029785 + C844.796814,559.899963 844.151367,550.777222 844.039978,541.647644 + C843.875366,528.157349 844.023315,514.663452 843.973206,501.171417 + C843.962769,498.366394 844.243896,495.191406 839.997925,494.538177 + C839.326233,478.318695 839.758423,462.430847 837.779663,446.849182 + C834.529297,421.255829 823.151123,398.918518 805.493042,380.181274 + C793.981995,367.966766 781.588867,356.570251 769.352356,345.060852 + C765.653015,341.581299 761.155518,338.950317 756.843567,335.649292 + C743.908691,326.317169 729.995605,319.814392 714.687195,316.457092 + C713.554565,316.208710 712.242615,316.778168 710.639099,316.950745 + C698.542175,312.221039 686.391602,309.916016 673.730347,309.923553 + C565.775574,309.987640 457.820831,309.968811 349.866089,310.059326 + C344.561615,310.063751 339.193878,310.469238 333.963470,311.337677 + C280.783264,320.168030 243.279373,364.230225 243.023254,418.147522 + C242.903763,443.303101 242.982635,468.459686 242.985275,493.615814 + C242.994949,586.243652 242.955917,678.871582 243.061478,771.499329 + C243.088242,794.982666 249.616028,816.593689 263.836487,835.442505 + C268.606262,841.764709 274.585938,847.174133 279.898254,853.120605 + C279.604553,853.562805 279.704010,853.814636 280.044067,853.997742 + C280.005829,853.999634 280.002563,853.923096 280.186279,854.166626 + C280.937561,854.595703 281.505157,854.781189 282.037994,854.970215 + C282.003235,854.973633 282.046844,854.919006 282.027588,855.286072 + C283.158875,857.410828 284.116425,859.338989 285.492432,860.897583 + C292.535645,868.875305 299.851685,876.616882 306.761627,884.706421 + C317.245636,896.980347 329.179504,907.451233 343.404388,915.154358 + C365.429352,927.081238 388.899506,932.710754 413.902679,931.339478 + C408.122437,933.121399 402.442688,934.550720 396.761139,935.972961 + C390.791687,937.467468 385.126617,937.440063 379.376343,934.430664 + C374.882202,932.078674 369.887848,929.649963 364.994995,929.370667 + C359.659149,929.066101 355.466064,927.296631 351.280640,924.582336 + C350.536652,924.099854 349.671295,923.804443 347.977051,923.005249 + C349.180267,925.916565 350.009216,927.922302 350.923737,930.135132 + C345.875610,932.306213 339.497589,930.720032 336.486237,936.514343 + C336.331818,936.811401 335.562317,936.919800 335.088043,936.900391 + C324.405731,936.462463 313.717834,936.111389 303.045990,935.486938 + C296.836243,935.123596 290.664795,934.695129 285.914490,939.670166 + C283.610229,942.083435 281.634979,942.063660 278.927979,940.412354 + C276.570862,938.974487 273.935120,937.459961 271.281799,937.137634 + C262.104797,936.022888 253.458191,933.694641 245.492767,928.815491 + C238.599548,924.593079 231.271408,921.058594 224.521591,916.631348 + C219.204956,913.144165 214.256332,909.001465 209.550766,904.704773 + C205.226151,900.755737 201.842072,895.720215 197.316742,892.062683 + C192.335907,888.036987 190.979248,882.060059 187.697311,877.163818 + C185.246872,873.508179 183.672867,869.253052 181.818619,865.214294 + C180.663101,862.697388 178.861938,860.101013 178.817535,857.515076 + C178.628326,846.496338 173.810349,837.184875 168.344193,827.855835 + C167.921219,832.154236 167.309845,836.566223 168.032440,840.747681 + C170.493652,854.990051 175.235184,868.571350 181.171188,881.728210 + C182.196503,884.000732 182.235214,885.558777 179.185074,885.971924 + C174.280182,873.505493 169.628265,861.253113 164.956284,848.705566 + C164.636017,848.262268 164.335815,848.114014 164.035629,847.965759 + C164.035629,847.965759 164.018539,847.998840 164.312347,847.753601 + C164.076660,845.324341 163.547180,843.140381 163.017685,840.956360 + C163.017685,840.956360 163.043472,840.974731 163.221771,840.560669 + C163.123734,837.398071 162.847382,834.649475 162.610870,831.475159 + C162.540268,823.223755 162.330643,815.398010 162.334015,807.572449 + C162.415344,619.038269 162.519424,430.504120 162.764160,241.573059 + C164.396896,224.044144 169.042175,207.829910 176.951843,192.546234 + C177.533127,191.422989 177.651611,190.060211 177.985229,188.808792 + C180.320938,185.255600 182.656647,181.702408 185.368835,177.754288 + C188.851440,173.245544 191.957565,169.131729 195.063690,165.017914 + C195.063675,165.017914 195.003845,165.003922 195.364883,165.080093 + C199.946686,161.225510 204.181549,157.309738 208.382980,153.358398 + C210.961136,150.933762 213.488052,148.454681 216.037979,146.000031 + C216.037979,146.000031 216.029800,146.033829 216.361084,146.145721 + C217.813522,145.179688 218.934677,144.101730 220.055832,143.023773 + C220.055832,143.023773 220.000656,143.001984 220.359589,143.120880 + C222.158813,142.152878 223.599106,141.065979 225.039383,139.979095 + C225.039383,139.979095 225.032379,140.038437 225.349579,140.081543 + C226.460587,139.416077 227.254410,138.707520 228.048218,137.998962 + C228.048218,137.998962 228.037643,138.048889 228.387024,138.114716 + C233.485779,135.763092 238.235138,133.345642 243.359009,130.899567 + C250.604446,128.297592 257.475372,125.724258 264.346283,123.150917 + C264.346283,123.150917 264.479218,123.093704 264.901001,123.138603 + C265.551697,123.137711 265.780579,123.091919 266.430298,123.052216 + C274.237335,121.799263 281.623535,120.540222 289.476929,119.317017 + C314.376343,119.306656 338.808563,119.244797 363.240784,119.254318 + C364.664825,119.254875 366.088623,119.833435 367.512543,120.143005 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M840.018799,495.007324 + C844.243896,495.191406 843.962769,498.366394 843.973206,501.171417 + C844.023315,514.663452 843.875366,528.157349 844.039978,541.647644 + C844.151367,550.777222 844.796814,559.899963 844.935974,569.029785 + C844.996338,572.987915 844.181458,576.954102 844.141357,580.920532 + C844.109802,584.033447 844.658142,587.152283 844.948975,590.268494 + C845.547485,590.250549 846.145996,590.232544 846.744507,590.214600 + C846.830505,588.344421 846.972412,586.474854 846.994141,584.603882 + C847.340332,554.822327 847.398071,525.033203 848.193176,495.263733 + C848.397461,487.615387 850.920166,480.029877 852.363953,472.412842 + C852.610535,471.112061 852.938599,469.801819 852.972229,468.489319 + C853.345520,453.936340 853.815247,439.383301 853.938171,424.827576 + C853.994141,418.202515 853.287476,411.573303 853.038879,404.941803 + C852.977539,403.305450 852.912598,401.434784 853.599670,400.041992 + C859.067017,388.958374 857.653748,377.267303 856.036316,365.862640 + C853.979675,351.360748 852.379761,336.653229 854.362427,322.368683 + C857.808350,297.541016 857.175781,272.717957 856.795593,247.912750 + C856.329895,217.527451 846.403625,190.254852 825.836121,167.344177 + C821.994446,163.064835 818.032654,158.893280 814.095337,154.329620 + C820.264893,160.224182 826.899231,166.093796 832.564697,172.783936 + C841.113281,182.878738 846.997009,194.774704 851.359863,207.113754 + C854.489685,215.965591 855.696167,225.527374 857.407471,234.837357 + C858.177551,239.026825 858.343750,243.374557 858.346741,247.650787 + C858.401428,326.463135 858.385925,405.275482 858.399048,484.087860 + C858.400269,491.249817 858.513855,498.411652 858.543823,505.573700 + C858.844360,577.417786 859.186035,649.261780 859.413391,721.106079 + C859.523010,755.761902 859.915344,790.429138 859.178833,825.069885 + C858.842896,840.865723 855.393066,856.446045 849.288391,871.254150 + C839.527588,894.930969 823.921387,914.099121 803.508240,929.201782 + C795.927734,934.810120 787.249023,939.034180 778.781982,943.318115 + C768.792419,948.372375 758.154053,951.665405 746.162720,952.788208 + C744.932739,952.769287 744.469482,952.730286 744.004517,952.517944 + C744.002747,952.344543 744.002441,951.997559 744.390686,951.930542 + C770.306152,947.103455 792.922974,936.492004 812.617310,919.343201 + C829.715393,904.455261 841.866272,886.435974 849.380493,865.190491 + C851.441040,859.364441 854.719177,853.565063 851.139221,847.075500 + C850.650146,846.188904 850.874817,844.733948 851.141113,843.632019 + C854.427124,830.033813 850.615173,817.046753 847.751892,803.987915 + C847.554016,803.085510 846.639954,802.340088 845.998352,801.436340 + C843.891052,803.736511 845.286621,809.205322 839.863281,806.469971 + C839.903625,797.339233 839.957275,788.672791 839.959473,780.006409 + C839.983948,685.006714 840.000244,590.007019 840.018799,495.007324 +M856.997559,549.500000 + C856.997559,536.177307 856.997559,522.854614 856.997559,509.531891 + C856.742004,509.535126 856.486450,509.538391 856.230896,509.541626 + C856.230896,577.883972 856.230896,646.226257 856.230896,714.568542 + C856.486450,714.569092 856.742004,714.569580 856.997559,714.570068 + C856.997559,659.880066 856.997559,605.190002 856.997559,549.500000 +M855.997559,445.500366 + C855.997559,459.519104 855.997559,473.537842 855.997559,487.556549 + C856.213379,487.553558 856.429199,487.550537 856.645020,487.547516 + C856.645020,467.245667 856.645020,446.943817 856.645020,426.641968 + C856.429199,426.641449 856.213379,426.640930 855.997559,426.640411 + C855.997559,432.593872 855.997559,438.547302 855.997559,445.500366 +M855.997498,808.994690 + C856.085205,810.154968 856.172852,811.315247 856.260498,812.475464 + C856.419250,812.461060 856.578003,812.446655 856.736755,812.432251 + C856.736755,793.093262 856.736755,773.754272 856.736755,754.415222 + C856.490356,754.414307 856.243958,754.413391 855.997559,754.412415 + C855.997559,772.313599 855.997559,790.214783 855.997498,808.994690 +M844.997559,602.588379 + C844.997559,604.428589 844.997559,606.268738 844.997559,608.108948 + C845.444946,608.083740 845.892334,608.058594 846.339722,608.033386 + C846.339722,604.664795 846.339722,601.296143 846.339722,597.927551 + C846.011902,597.922180 845.684021,597.916809 845.356201,597.911438 + C845.236633,599.185974 845.117126,600.460510 844.997559,602.588379 +M856.030396,420.843170 + C856.155884,421.118500 856.281372,421.393799 856.406860,421.669098 + C856.518494,421.615692 856.726440,421.564087 856.727539,421.508575 + C856.747070,420.487610 856.741760,419.466217 856.741760,418.444885 + C856.542786,418.444489 856.343811,418.444092 856.144897,418.443726 + C856.098877,419.054138 856.052856,419.664551 856.030396,420.843170 +z"/> +<path fill="#637E63" opacity="1.000000" stroke="none" + d=" +M744.006287,952.691284 + C744.469482,952.730286 744.932739,952.769287 745.739624,952.877441 + C741.887573,953.948425 737.692993,955.819275 733.495789,955.825012 + C622.607300,955.977966 511.718536,955.925293 400.829803,955.938599 + C362.204681,955.943237 323.579346,956.101257 284.954834,955.969238 + C280.997284,955.955750 277.044922,954.428162 273.326263,953.260864 + C297.713715,953.297180 321.865051,953.675781 346.479370,954.119751 + C381.235168,954.164368 415.527924,954.122131 449.820709,954.126892 + C540.214294,954.139587 630.607910,954.192749 721.001465,954.150757 + C726.779480,954.148071 732.557312,953.471008 738.494019,953.152161 + C738.652832,953.196716 738.962341,953.082825 739.385437,953.109375 + C741.207764,952.987732 742.607056,952.839539 744.006287,952.691284 +z"/> +<path fill="#06b6d4" opacity="1.000000" stroke="none" + d=" +M162.619415,241.969971 + C162.519424,430.504120 162.415344,619.038269 162.334015,807.572449 + C162.330643,815.398010 162.540268,823.223755 162.438629,831.472839 + C162.226593,831.896301 161.889160,831.966003 161.889160,831.966003 + C161.592010,826.450500 161.246964,820.936951 161.017670,815.418579 + C160.900940,812.609009 160.992310,809.790710 160.987473,806.040527 + C160.990158,722.842468 161.000259,640.580322 160.964508,558.318115 + C160.963745,556.565186 160.435410,554.812500 160.153198,553.059692 + C160.112396,550.988770 160.071609,548.917847 160.337311,546.068665 + C160.760559,544.471375 160.978836,543.652466 160.979370,542.833374 + C160.997757,514.500916 161.006149,486.168457 160.961838,457.836121 + C160.959839,456.563782 160.453461,455.292236 160.182007,454.020325 + C160.112488,423.247040 160.009888,392.473785 159.981750,361.700470 + C159.945847,322.438934 159.951889,283.177307 160.025192,243.915878 + C160.028671,242.056046 160.859131,240.197739 161.656052,238.478958 + C162.211578,239.736115 162.415497,240.853043 162.619415,241.969971 +z"/> +<path fill="#00FFFF" opacity="1.000000" stroke="none" + d=" +M160.084442,553.520630 + C160.435410,554.812500 160.963745,556.565186 160.964508,558.318115 + C161.000259,640.580322 160.990158,722.842468 160.966766,805.575073 + C160.632248,804.539062 160.040527,803.032654 160.039810,801.526062 + C160.000397,719.011230 160.010559,636.496460 160.084442,553.520630 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M346.016357,954.054382 + C321.865051,953.675781 297.713715,953.297180 273.080811,952.937500 + C272.599182,952.956421 272.260376,952.915649 271.814270,952.691528 + C270.052246,952.081604 268.736267,951.695740 267.846802,951.220337 + C273.580353,948.060608 279.073853,950.637390 284.459656,950.717957 + C290.397705,950.806763 296.328369,951.926453 302.258606,951.895813 + C315.678070,951.826538 329.094482,951.260254 342.514587,951.093689 + C344.001587,951.075256 345.504486,952.336853 346.796021,953.139404 + C346.335419,953.486328 346.143494,953.746460 346.016357,954.054382 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M641.746216,105.740341 + C610.777283,101.454941 579.398621,104.660835 548.124084,103.692657 + C546.007507,103.627136 543.896545,103.378769 540.874512,103.145233 + C542.108643,102.056770 542.668823,101.562706 543.529297,100.978439 + C545.653198,101.292381 547.475647,102.042229 549.300537,102.048439 + C573.962708,102.132462 598.628418,101.899818 623.285339,102.270638 + C629.381653,102.362328 635.449768,104.330650 641.746216,105.740341 +z"/> +<path fill="#41C99D" opacity="1.000000" stroke="none" + d=" +M164.976349,849.000671 + C169.628265,861.253113 174.280182,873.505493 179.244354,886.247498 + C179.853500,887.211243 180.150436,887.685425 180.564713,888.501587 + C182.407700,891.398071 184.133316,893.952515 185.871307,896.666260 + C185.883682,896.825439 186.124237,897.035461 186.173950,897.272583 + C186.368225,897.833008 186.614944,898.025513 186.973724,898.053894 + C186.983658,898.020691 186.914673,898.026978 186.989227,898.323853 + C187.348221,898.908630 187.632660,899.196533 187.921509,899.647583 + C187.925919,899.810669 188.155853,900.042297 188.202271,900.269287 + C188.407745,900.791992 188.653412,900.964111 188.992844,901.006348 + C189.000000,901.000000 188.987137,901.013733 189.072021,901.271606 + C189.416840,901.776672 189.676758,902.023987 189.986023,902.537720 + C190.376892,903.208923 190.718445,903.613770 191.132080,904.248657 + C191.392334,904.765930 191.655960,904.936646 191.995972,904.996582 + C191.996902,905.002441 192.008835,905.005249 192.088135,905.246460 + C192.436050,905.677795 192.704681,905.867920 192.985931,906.030884 + C192.998520,906.003723 192.942551,906.024902 193.026917,906.286377 + C193.386230,906.783020 193.661179,907.018188 194.038177,907.552002 + C195.422150,909.231506 196.704071,910.612366 198.065399,912.238525 + C198.424850,912.666321 198.704941,912.848755 198.991333,913.014404 + C198.997620,912.997559 198.971634,913.023621 199.109039,913.318115 + C200.837189,915.060181 202.427948,916.507690 204.009216,917.979614 + C203.999710,918.003967 204.050385,917.991028 204.131653,918.220581 + C204.393250,918.747742 204.654968,918.925659 204.996948,918.994019 + C204.995773,919.004211 205.016068,919.001587 205.102859,919.234253 + C205.384537,919.757385 205.652847,919.940186 206.087311,920.246948 + C206.609146,920.700745 207.038300,920.922852 207.658997,921.424683 + C209.107803,922.913208 210.365097,924.121948 211.452667,925.513550 + C211.282928,925.696411 210.943954,926.062683 210.943939,926.062683 + C206.682892,922.596985 201.948410,919.565918 198.273193,915.562439 + C192.928619,909.740662 187.658661,903.631897 183.609131,896.893005 + C178.115723,887.751404 173.389374,878.078918 169.146606,868.282227 + C166.637726,862.489136 165.696335,856.017273 164.316650,849.426147 + C164.583221,849.001587 164.976349,849.000671 164.976349,849.000671 +z"/> +<path fill="#2CC4AC" opacity="1.000000" stroke="none" + d=" +M477.001221,99.704071 + C477.866638,99.950081 478.702362,100.494049 479.455841,101.134781 + C479.796143,101.424187 479.972687,101.906181 480.419342,102.608955 + C452.383545,104.830887 424.273346,100.114319 396.427979,106.251633 + C398.961578,105.079697 401.693359,103.568764 404.583801,103.148270 + C409.605164,102.417793 414.722748,102.103699 419.803162,102.068298 + C437.947723,101.941887 456.093781,102.035713 474.238251,101.903366 + C475.076782,101.897263 478.206116,103.684158 477.001221,99.704071 +z"/> +<path fill="#47C698" opacity="1.000000" stroke="none" + d=" +M162.764160,241.573059 + C162.415497,240.853043 162.211578,239.736115 162.000977,238.265656 + C163.086914,225.607986 164.658722,213.449402 170.869873,202.393097 + C173.269608,198.121384 175.208389,193.590683 177.671204,188.993378 + C177.651611,190.060211 177.533127,191.422989 176.951843,192.546234 + C169.042175,207.829910 164.396896,224.044144 162.764160,241.573059 +z"/> +<path fill="#00FF99" opacity="1.000000" stroke="none" + d=" +M160.113678,454.484558 + C160.453461,455.292236 160.959839,456.563782 160.961838,457.836121 + C161.006149,486.168457 160.997757,514.500916 160.979370,542.833374 + C160.978836,543.652466 160.760559,544.471375 160.412903,545.630859 + C160.136429,515.630432 160.090897,485.289642 160.113678,454.484558 +z"/> +<path fill="#2CC79F" opacity="1.000000" stroke="none" + d=" +M367.806641,120.045166 + C366.088623,119.833435 364.664825,119.254875 363.240784,119.254318 + C338.808563,119.244797 314.376343,119.306656 289.466949,119.043747 + C288.965912,118.554092 288.942047,118.373535 288.918152,118.192978 + C310.462250,118.128761 332.006836,118.127151 353.550110,117.957306 + C359.096130,117.913589 364.637970,117.340462 370.621796,117.029617 + C370.074799,118.014900 369.087769,118.981110 367.806641,120.045166 +z"/> +<path fill="#48D09A" opacity="1.000000" stroke="none" + d=" +M215.668030,145.999268 + C213.488052,148.454681 210.961136,150.933762 208.382980,153.358398 + C204.181549,157.309738 199.946686,161.225510 195.377960,165.107895 + C197.868362,161.645493 200.404190,157.906754 203.626160,154.904373 + C207.189178,151.584167 211.380432,148.938141 215.668030,145.999268 +z"/> +<path fill="#449678" opacity="1.000000" stroke="none" + d=" +M727.067993,118.662300 + C709.400879,119.116837 691.453796,119.205421 672.981384,119.347687 + C672.140808,119.341209 671.824585,119.286629 671.263428,118.966019 + C671.019348,118.694420 671.004333,118.285271 671.004333,118.285271 + C689.598877,118.288956 708.193420,118.292648 727.067993,118.662300 +z"/> +<path fill="#41C99D" opacity="1.000000" stroke="none" + d=" +M267.420319,951.309875 + C268.736267,951.695740 270.052246,952.081604 271.647125,952.657349 + C261.184357,952.121094 250.886978,949.728455 241.210999,944.257202 + C241.124313,943.833984 241.302032,943.614014 241.673523,943.691711 + C247.645523,945.586548 253.246033,947.403687 258.878174,949.201233 + C258.909851,949.181641 258.859283,949.126953 259.050751,949.351562 + C259.811005,949.668213 260.379791,949.760193 261.184509,949.979858 + C261.770721,950.109863 262.120941,950.112305 262.725647,950.340088 + C263.635315,950.658508 264.290497,950.751526 265.240295,950.977417 + C266.163361,951.176880 266.791840,951.243347 267.420319,951.309875 +z"/> +<path fill="#4CD298" opacity="1.000000" stroke="none" + d=" +M263.904022,123.090408 + C257.475372,125.724258 250.604446,128.297592 243.360748,130.718353 + C242.987946,130.565765 242.990158,130.203278 242.990158,130.203278 + C249.814026,127.812149 256.637878,125.421021 263.904022,123.090408 +z"/> +<path fill="#5CCD95" opacity="1.000000" stroke="none" + d=" +M288.503784,118.129204 + C288.942047,118.373535 288.965912,118.554092 288.999756,119.007919 + C281.623535,120.540222 274.237335,121.799263 266.433289,122.843079 + C266.015411,122.627853 266.037292,122.210213 266.037292,122.210220 + C273.388000,120.828621 280.738739,119.447021 288.503784,118.129204 +z"/> +<path fill="#48D09A" opacity="1.000000" stroke="none" + d=" +M242.617218,130.138428 + C242.990158,130.203278 242.987946,130.565765 242.986221,130.746979 + C238.235138,133.345642 233.485779,135.763092 228.361542,138.113708 + C232.739182,135.389130 237.491730,132.731339 242.617218,130.138428 +z"/> +<path fill="#31C5B1" opacity="1.000000" stroke="none" + d=" +M456.722168,42.940254 + C457.029297,50.506069 456.991394,58.325230 456.912781,66.575485 + C456.267456,65.588051 455.105225,64.150276 455.153412,62.754272 + C455.378571,56.227737 455.937469,49.712730 456.722168,42.940254 +z"/> +<path fill="#48D09A" opacity="1.000000" stroke="none" + d=" +M194.731934,165.100403 + C191.957565,169.131729 188.851440,173.245544 185.454941,177.380219 + C188.243088,173.328354 191.321625,169.255615 194.731934,165.100403 +z"/> +<path fill="#41C99D" opacity="1.000000" stroke="none" + d=" +M241.034378,943.943115 + C236.364349,941.944641 231.784271,939.837036 227.207275,937.247192 + C227.210373,936.764832 227.489731,936.456482 227.820953,936.574585 + C232.535446,938.999817 236.918732,941.306946 241.302032,943.614014 + C241.302032,943.614014 241.124313,943.833984 241.034378,943.943115 +z"/> +<path fill="#7F9DA3" opacity="1.000000" stroke="none" + d=" +M565.498962,70.090500 + C565.697205,61.835217 566.269714,53.474617 566.854797,44.657387 + C568.783508,52.882217 569.156189,61.504173 565.498962,70.090500 +z"/> +<path fill="#41C99D" opacity="1.000000" stroke="none" + d=" +M222.393082,934.758179 + C218.668427,932.067688 214.943787,929.377136 211.081543,926.374634 + C210.943954,926.062683 211.282928,925.696411 211.678467,925.610718 + C212.354584,925.720764 212.665527,925.807068 213.145172,925.999390 + C213.684586,926.524109 214.085602,926.833435 214.705933,927.427551 + C217.654785,929.761658 220.384354,931.811035 222.928955,934.081055 + C222.627045,934.453796 222.510071,934.606018 222.393082,934.758179 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M660.805725,112.763794 + C658.286804,112.076759 655.649536,111.048347 652.868408,109.709381 + C655.378784,110.406677 658.033081,111.414543 660.805725,112.763794 +z"/> +<path fill="#47C698" opacity="1.000000" stroke="none" + d=" +M161.939117,832.409668 + C161.889160,831.966003 162.226593,831.896301 162.398819,831.898621 + C162.847382,834.649475 163.123734,837.398071 163.225769,840.575989 + C162.697311,838.288025 162.343185,835.570740 161.939117,832.409668 +z"/> +<path fill="#47C698" opacity="1.000000" stroke="none" + d=" +M163.015701,841.388062 + C163.547180,843.140381 164.076660,845.324341 164.330139,847.747437 + C163.707321,845.930847 163.360519,843.875305 163.015701,841.388062 +z"/> +<path fill="#48D09A" opacity="1.000000" stroke="none" + d=" +M224.683655,140.010986 + C223.599106,141.065979 222.158813,142.152878 220.364136,143.150177 + C221.449112,142.054703 222.888519,141.048782 224.683655,140.010986 +z"/> +<path fill="#41C99D" opacity="1.000000" stroke="none" + d=" +M227.070450,936.918762 + C225.548859,936.480225 224.167191,935.887756 222.589325,935.026733 + C222.510071,934.606018 222.627045,934.453796 223.249023,934.136841 + C224.999268,934.800171 226.244507,935.628296 227.489746,936.456421 + C227.489731,936.456482 227.210373,936.764832 227.070450,936.918762 +z"/> +<path fill="#48D09A" opacity="1.000000" stroke="none" + d=" +M219.701996,143.018097 + C218.934677,144.101730 217.813522,145.179688 216.344193,146.149841 + C217.113388,145.032181 218.230759,144.022293 219.701996,143.018097 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M651.792419,108.764847 + C650.374390,108.697617 648.802185,108.297722 647.027466,107.609283 + C648.429382,107.691216 650.033813,108.061699 651.792419,108.764847 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M670.700195,118.123581 + C671.004333,118.285271 671.019348,118.694420 671.027222,118.899185 + C670.028381,118.678749 669.021606,118.253540 667.947815,117.493896 + C668.719177,117.426941 669.557617,117.694420 670.700195,118.123581 +z"/> +<path fill="#48D09A" opacity="1.000000" stroke="none" + d=" +M227.711273,138.013611 + C227.254410,138.707520 226.460587,139.416077 225.319763,140.079605 + C225.773285,139.365799 226.573792,138.697021 227.711273,138.013611 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M645.786377,106.748795 + C644.805908,106.898689 643.636841,106.730606 642.216980,106.304337 + C643.176697,106.174377 644.387207,106.302605 645.786377,106.748795 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M667.772827,116.825638 + C666.892517,116.694481 665.933105,116.254326 664.925537,115.483963 + C665.816101,115.608055 666.754883,116.062347 667.772827,116.825638 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M811.957642,151.649704 + C811.406799,151.481308 810.779724,151.029556 810.111206,150.264404 + C810.673645,150.422791 811.277527,150.894562 811.957642,151.649704 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M809.940186,149.637283 + C809.502563,149.758560 808.958862,149.589859 808.242065,149.189255 + C808.657410,149.087341 809.245667,149.217331 809.940186,149.637283 +z"/> +<path fill="#2CC79F" opacity="1.000000" stroke="none" + d=" +M376.637695,114.066193 + C376.448944,114.526497 375.885895,114.907318 374.968872,115.242020 + C375.164398,114.792831 375.713898,114.389771 376.637695,114.066193 +z"/> +<path fill="#4CD298" opacity="1.000000" stroke="none" + d=" +M265.734436,122.203903 + C266.037292,122.210213 266.015411,122.627853 266.012451,122.836990 + C265.780579,123.091919 265.551697,123.137711 264.973267,123.142502 + C264.893005,122.800194 265.162262,122.498901 265.734436,122.203903 +z"/> +<path fill="#47C698" opacity="1.000000" stroke="none" + d=" +M164.956284,848.705566 + C164.976349,849.000671 164.583221,849.001587 164.386658,849.000122 + C164.141586,848.829895 164.093094,848.661194 164.040100,848.229126 + C164.335815,848.114014 164.636017,848.262268 164.956284,848.705566 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M664.806885,114.837517 + C664.843811,115.120506 664.358093,115.225540 664.358093,115.225540 + C664.358093,115.225540 663.920227,114.990265 663.839233,114.754814 + C664.095459,114.531090 664.432678,114.542809 664.806885,114.837517 +z"/> +<path fill="#2CC79F" opacity="1.000000" stroke="none" + d=" +M374.187561,115.149109 + C374.222382,115.590034 373.845886,115.978600 373.052734,116.297516 + C373.016144,115.850822 373.396210,115.473778 374.187561,115.149109 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M662.845642,113.837112 + C662.577942,114.056519 662.257812,113.993759 661.853149,113.687759 + C662.110168,113.481331 662.451660,113.518135 662.845642,113.837112 +z"/> +<path fill="#2CC79F" opacity="1.000000" stroke="none" + d=" +M372.250732,116.187820 + C372.296387,116.567116 371.996918,116.890915 371.363922,117.140533 + C371.322144,116.754997 371.613892,116.443657 372.250732,116.187820 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M813.953918,153.702118 + C813.713806,153.841400 813.468811,153.665741 813.172302,153.211761 + C813.431458,152.998047 813.707520,153.149307 813.953918,153.702118 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M812.928528,152.694763 + C812.684631,152.826950 812.441711,152.643311 812.156128,152.173676 + C812.407043,151.995728 812.679077,152.159485 812.928528,152.694763 +z"/> +<path fill="#2E2B2B" opacity="1.000000" stroke="none" + d=" +M708.473145,191.277771 + C708.995605,200.980957 709.287842,210.648895 709.049622,220.303772 + C708.806946,230.141632 700.273621,238.502396 690.369019,239.046799 + C686.712097,239.247787 683.039307,239.196518 679.373718,239.197357 + C571.557556,239.221786 463.741425,239.242065 355.925262,239.252853 + C334.086792,239.255035 328.132141,233.240723 328.263184,211.306168 + C328.300964,204.983322 328.478699,198.661301 328.788635,191.943115 + C429.027130,191.500854 529.069275,191.463501 629.111389,191.401764 + C655.410950,191.385529 681.710510,191.293823 708.473145,191.277771 +z"/> +<path fill="#000100" opacity="1.000000" stroke="none" + d=" +M495.262878,43.353783 + C503.036163,33.744705 518.169128,32.594967 526.017822,41.704769 + C530.302063,46.677364 532.796204,51.917713 531.328369,59.447845 + C529.649231,68.062172 517.515564,76.813034 507.730530,74.933403 + C493.815094,72.260345 486.376251,56.938816 495.262878,43.353783 +z"/> +<path fill="#FFFEFD" opacity="1.000000" stroke="none" + d=" +M280.012543,853.000793 + C274.585938,847.174133 268.606262,841.764709 263.836487,835.442505 + C249.616028,816.593689 243.088242,794.982666 243.061478,771.499329 + C242.955917,678.871582 242.994949,586.243652 242.985275,493.615814 + C242.982635,468.459686 242.903763,443.303101 243.023254,418.147522 + C243.279373,364.230225 280.783264,320.168030 333.963470,311.337677 + C339.193878,310.469238 344.561615,310.063751 349.866089,310.059326 + C457.820831,309.968811 565.775574,309.987640 673.730347,309.923553 + C686.391602,309.916016 698.542175,312.221039 710.956421,317.110474 + C714.208862,318.461761 716.783264,319.606689 719.326721,320.816620 + C732.237610,326.958344 742.848145,336.165771 752.962769,346.053680 + C752.996033,346.032593 752.917358,346.035553 752.991760,346.306854 + C753.349854,346.813904 753.633545,347.049652 753.956970,347.473633 + C754.117798,347.913452 754.315796,348.063599 754.728271,348.381989 + C755.205383,348.844452 755.544861,349.037262 755.866516,349.161255 + C755.848633,349.092407 755.716675,349.145508 755.767639,349.434631 + C756.215515,350.133972 756.612427,350.544189 756.999573,350.978455 + C756.989746,351.002502 757.041687,351.004028 757.097778,351.261414 + C757.417908,351.740967 757.682007,351.963135 758.055969,352.502197 + C772.532837,372.286804 778.836487,394.112030 778.797241,418.299408 + C778.605347,536.619324 778.744690,654.939697 778.686584,773.259949 + C778.683960,778.568298 778.346191,783.955933 777.413147,789.172180 + C768.127808,841.082336 724.888916,878.058533 672.145813,878.212402 + C564.658691,878.525879 457.169952,878.385803 349.682343,878.192505 + C341.100525,878.177063 332.413483,876.854980 323.965576,875.180359 + C308.323730,872.079590 294.769073,864.267273 282.046844,854.919006 + C282.046844,854.919006 282.003235,854.973633 281.885376,854.674683 + C281.179199,854.224792 280.590881,854.073914 280.002563,853.923096 + C280.002563,853.923096 280.005829,853.999634 280.167297,853.738770 + C280.223358,853.318909 280.117950,853.159851 280.012543,853.000793 +M478.595825,743.095276 + C498.663422,722.884033 518.741638,702.683411 538.781982,682.445190 + C540.766357,680.441223 542.776978,678.379089 544.325562,676.045410 + C547.541199,671.199585 547.714111,666.002258 544.815735,660.940613 + C541.907532,655.862061 537.212158,652.817749 531.551514,654.052673 + C527.463562,654.944580 523.108032,657.281982 520.144531,660.246765 + C487.175385,693.229980 454.484741,726.491394 421.647522,759.606934 + C412.187042,769.147583 402.497681,778.461243 392.887909,787.903931 + C381.134491,779.257324 369.358521,770.583130 357.570435,761.925415 + C347.914215,754.833557 338.425537,747.493896 328.527679,740.756042 + C318.782501,734.122070 306.343109,739.964172 305.405609,751.358704 + C304.857025,758.026367 308.485413,762.622070 313.634674,766.348206 + C336.016266,782.544189 358.390045,798.751282 380.711761,815.029541 + C392.577515,823.682678 398.964447,823.247986 409.428772,812.720459 + C432.325043,789.685913 455.210907,766.641052 478.595825,743.095276 +M593.593506,547.724487 + C598.709778,558.279968 607.850586,563.773560 618.538757,566.947998 + C634.203430,571.600586 650.300415,572.348877 666.527588,571.451294 + C678.396240,570.794800 690.086609,569.317322 700.942017,564.045959 + C716.867798,556.312317 724.129761,539.352295 717.625061,524.607910 + C713.404175,515.040283 705.594299,509.210144 695.949158,505.874756 + C675.140747,498.679108 653.758911,498.761261 632.282715,501.611450 + C622.493408,502.910583 613.009094,505.576569 604.713928,511.268127 + C591.945801,520.028687 587.876953,532.894287 593.593506,547.724487 +M430.311920,521.333984 + C424.412872,511.494080 414.973907,506.780029 404.435089,504.045685 + C385.820618,499.216125 366.927155,498.851624 347.966248,501.604187 + C337.681488,503.097290 327.736176,505.745728 319.125580,511.965790 + C300.820587,525.188904 301.548828,549.719604 320.819763,561.451599 + C325.442627,564.265930 330.658661,566.447205 335.888275,567.858521 + C350.641968,571.840271 365.764771,572.477539 380.966400,571.480652 + C392.799683,570.704712 404.512909,569.291504 415.380096,564.060608 + C432.444458,555.846741 438.867523,538.172668 430.311920,521.333984 +M683.201294,745.417236 + C678.875183,745.513611 674.549194,745.691833 670.223022,745.693970 + C622.578979,745.717346 574.934998,745.689270 527.290955,745.732788 + C514.636780,745.744324 506.119385,753.155151 506.035461,763.984863 + C505.949615,775.067200 514.631836,783.022522 527.076965,783.090088 + C542.236023,783.172302 557.395813,783.141663 572.555237,783.141907 + C609.371033,783.142639 646.186951,783.094604 683.002625,783.160950 + C690.032715,783.173584 695.674194,780.708801 699.725586,774.944824 + C707.980652,763.200256 700.328857,746.028748 683.201294,745.417236 +M573.435547,517.796875 + C563.290527,513.203308 554.096924,517.702332 552.040833,528.681213 + C550.224304,538.380920 545.466309,546.021118 537.482544,551.629333 + C513.555176,568.437317 474.801666,556.611938 472.075714,527.791504 + C471.571320,522.458679 468.217896,518.713257 463.056824,516.828613 + C451.910858,512.758362 441.973785,522.234802 444.109802,535.145996 + C445.820068,545.483887 449.907104,554.909119 456.439301,563.146667 + C473.917084,585.187134 505.757721,594.419189 534.178406,585.122131 + C558.985962,577.006897 575.193726,560.573547 580.340332,534.374939 + C581.639832,527.759460 579.713318,522.207764 573.435547,517.796875 +M339.474243,431.979828 + C335.828156,437.661072 331.469757,443.023926 328.746185,449.117493 + C326.267822,454.662567 327.625061,460.599701 331.880798,465.395721 + C338.238922,472.561127 348.371613,472.942932 355.360992,466.202850 + C360.625397,461.126282 365.369873,455.432312 371.034668,450.868103 + C378.804321,444.608063 383.656525,444.462585 391.265015,450.512360 + C396.940247,455.024902 401.674011,460.736115 406.737183,465.999939 + C412.669189,472.167053 420.260956,473.669586 427.099426,469.884247 + C434.161804,465.975098 437.887146,457.635101 435.282349,449.818817 + C433.785217,445.326324 431.594604,440.831604 428.760559,437.055054 + C407.427307,408.627106 366.645386,406.159454 339.474243,431.979828 +M628.154541,452.611237 + C639.186340,444.087555 644.515686,444.122406 654.848511,453.421021 + C659.164978,457.305450 662.849915,461.882324 666.995239,465.968567 + C672.520691,471.415222 679.697083,472.468719 686.240051,469.049805 + C692.859985,465.590668 696.739807,458.505768 695.058716,451.151093 + C694.083984,446.886444 692.195496,442.593872 689.778137,438.934937 + C676.143799,418.297729 649.069153,409.031464 624.522034,416.614532 + C608.181335,421.662506 595.618164,431.562134 588.567383,447.426849 + C584.819092,455.860718 587.804260,464.808380 595.025513,469.367218 + C602.081177,473.821533 609.730530,472.273621 616.356384,465.097839 + C620.080261,461.064819 623.856323,457.079926 628.154541,452.611237 +z"/> +<path fill="#FDA836" opacity="1.000000" stroke="none" + d=" +M282.027588,855.286072 + C294.769073,864.267273 308.323730,872.079590 323.965576,875.180359 + C332.413483,876.854980 341.100525,878.177063 349.682343,878.192505 + C457.169952,878.385803 564.658691,878.525879 672.145813,878.212402 + C724.888916,878.058533 768.127808,841.082336 777.413147,789.172180 + C778.346191,783.955933 778.683960,778.568298 778.686584,773.259949 + C778.744690,654.939697 778.605347,536.619324 778.797241,418.299408 + C778.836487,394.112030 772.532837,372.286804 757.967163,352.262115 + C757.526184,351.471436 757.283936,351.237732 757.041687,351.004028 + C757.041687,351.004028 756.989746,351.002502 756.955811,350.682068 + C756.520142,349.956268 756.118408,349.550903 755.716675,349.145508 + C755.716675,349.145508 755.848633,349.092407 755.727051,348.896423 + C755.267212,348.504425 754.928955,348.308350 754.590698,348.112305 + C754.315796,348.063599 754.117798,347.913452 753.862549,347.213348 + C753.458069,346.521759 753.187683,346.278656 752.917358,346.035553 + C752.917358,346.035553 752.996033,346.032593 752.997681,345.679779 + C754.340759,342.194855 755.682190,339.062775 757.023621,335.930664 + C761.155518,338.950317 765.653015,341.581299 769.352356,345.060852 + C781.588867,356.570251 793.981995,367.966766 805.493042,380.181274 + C823.151123,398.918518 834.529297,421.255829 837.779663,446.849182 + C839.758423,462.430847 839.326233,478.318695 839.997925,494.538177 + C840.000244,590.007019 839.983948,685.006714 839.959473,780.006409 + C839.957275,788.672791 839.903625,797.339233 839.643494,806.797852 + C838.941223,811.062500 838.469360,814.534912 837.971436,818.370667 + C837.888306,819.458557 837.831360,820.183167 837.563110,821.188965 + C836.904236,823.315308 836.456665,825.160400 835.979858,827.381470 + C835.922607,828.512756 835.894592,829.267944 835.624756,830.283691 + C833.067017,836.462341 830.934265,842.460083 828.401245,848.283752 + C820.399475,866.680786 808.950439,882.542114 793.806335,895.831482 + C767.704224,918.736694 737.199402,930.656067 702.717712,930.805969 + C606.480835,931.224121 510.241028,930.971497 414.002380,930.983704 + C388.899506,932.710754 365.429352,927.081238 343.404388,915.154358 + C329.179504,907.451233 317.245636,896.980347 306.761627,884.706421 + C299.851685,876.616882 292.535645,868.875305 285.492432,860.897583 + C284.116425,859.338989 283.158875,857.410828 282.027588,855.286072 +z"/> +<path fill="#FDBD73" opacity="1.000000" stroke="none" + d=" +M413.902679,931.339478 + C510.241028,930.971497 606.480835,931.224121 702.717712,930.805969 + C737.199402,930.656067 767.704224,918.736694 793.806335,895.831482 + C808.950439,882.542114 820.399475,866.680786 828.401245,848.283752 + C830.934265,842.460083 833.067017,836.462341 835.950623,830.211914 + C836.348572,828.921509 836.178833,827.963501 836.009033,827.005432 + C836.456665,825.160400 836.904236,823.315308 837.901245,821.156677 + C838.299622,819.897827 838.148560,818.952576 837.997559,818.007324 + C838.469360,814.534912 838.941223,811.062500 839.632812,807.262207 + C845.286621,809.205322 843.891052,803.736511 845.998352,801.436340 + C846.639954,802.340088 847.554016,803.085510 847.751892,803.987915 + C850.615173,817.046753 854.427124,830.033813 851.141113,843.632019 + C850.874817,844.733948 850.650146,846.188904 851.139221,847.075500 + C854.719177,853.565063 851.441040,859.364441 849.380493,865.190491 + C841.866272,886.435974 829.715393,904.455261 812.617310,919.343201 + C792.922974,936.492004 770.306152,947.103455 744.003479,951.930786 + C741.806152,952.359619 740.384216,952.721252 738.962341,953.082825 + C738.962341,953.082825 738.652832,953.196716 737.993591,953.117432 + C607.222900,953.027039 477.111450,953.015930 347.000000,953.004822 + C345.504486,952.336853 344.001587,951.075256 342.514587,951.093689 + C329.094482,951.260254 315.678070,951.826538 302.258606,951.895813 + C296.328369,951.926453 290.397705,950.806763 284.459656,950.717957 + C279.073853,950.637390 273.580353,948.060608 267.846802,951.220337 + C266.791840,951.243347 266.163361,951.176880 264.981812,950.771851 + C263.776215,950.327087 263.123688,950.220886 262.471191,950.114746 + C262.120941,950.112305 261.770721,950.109863 260.973389,949.785278 + C259.970612,949.351013 259.414948,949.238953 258.859283,949.126953 + C258.859283,949.126953 258.909851,949.181641 258.909607,948.798828 + C257.638184,947.219116 256.554169,945.360046 255.063782,944.938782 + C248.240509,943.010132 241.385727,941.520691 235.749908,936.607056 + C232.829391,934.060791 229.235718,932.111450 225.661499,930.539734 + C222.122910,928.983582 218.226273,928.241699 214.486649,927.142700 + C214.085602,926.833435 213.684586,926.524109 213.126999,925.637329 + C212.488144,921.854431 210.445160,920.842712 207.467438,921.144897 + C207.038300,920.922852 206.609146,920.700745 205.964981,920.041443 + C205.551910,919.346619 205.307281,919.145752 205.016068,919.001587 + C205.016068,919.001587 204.995773,919.004211 204.876251,918.795471 + C204.563873,918.337646 204.328430,918.139038 204.050385,917.991028 + C204.050385,917.991028 203.999710,918.003967 203.992035,917.612488 + C202.313446,915.821899 200.642563,914.422729 198.971649,913.023560 + C198.971634,913.023621 198.997620,912.997559 198.868042,912.803101 + C198.535645,912.344788 198.284836,912.139648 197.986023,911.993164 + C196.704071,910.612366 195.422150,909.231506 193.936340,907.299805 + C193.469131,906.507568 193.205826,906.266235 192.942535,906.024902 + C192.942551,906.024902 192.998520,906.003723 192.870880,905.816528 + C192.550140,905.360535 192.305328,905.152527 192.008835,905.005249 + C192.008835,905.005249 191.996902,905.002441 191.878357,904.800293 + C191.570862,904.351379 191.337585,904.158203 191.059998,904.018555 + C190.718445,903.613770 190.376892,903.208923 189.890594,902.283875 + C189.492950,901.513672 189.240036,901.263672 188.987137,901.013733 + C188.987137,901.013733 189.000000,901.000000 188.892502,900.814087 + C188.620224,900.384644 188.410507,900.189331 188.155853,900.042297 + C188.155853,900.042297 187.925919,899.810669 187.829956,899.354736 + C187.460892,898.608215 187.187790,898.317566 186.914673,898.026978 + C186.914673,898.026978 186.983658,898.020691 186.878143,897.845154 + C186.609207,897.404358 186.393066,897.192993 186.124237,897.035461 + C186.124237,897.035461 185.883682,896.825439 185.903168,896.223083 + C186.232300,891.567139 185.097229,888.573730 180.447357,888.159607 + C180.150436,887.685425 179.853500,887.211243 179.497314,886.461426 + C182.235214,885.558777 182.196503,884.000732 181.171188,881.728210 + C175.235184,868.571350 170.493652,854.990051 168.032440,840.747681 + C167.309845,836.566223 167.921219,832.154236 168.344193,827.855835 + C173.810349,837.184875 178.628326,846.496338 178.817535,857.515076 + C178.861938,860.101013 180.663101,862.697388 181.818619,865.214294 + C183.672867,869.253052 185.246872,873.508179 187.697311,877.163818 + C190.979248,882.060059 192.335907,888.036987 197.316742,892.062683 + C201.842072,895.720215 205.226151,900.755737 209.550766,904.704773 + C214.256332,909.001465 219.204956,913.144165 224.521591,916.631348 + C231.271408,921.058594 238.599548,924.593079 245.492767,928.815491 + C253.458191,933.694641 262.104797,936.022888 271.281799,937.137634 + C273.935120,937.459961 276.570862,938.974487 278.927979,940.412354 + C281.634979,942.063660 283.610229,942.083435 285.914490,939.670166 + C290.664795,934.695129 296.836243,935.123596 303.045990,935.486938 + C313.717834,936.111389 324.405731,936.462463 335.088043,936.900391 + C335.562317,936.919800 336.331818,936.811401 336.486237,936.514343 + C339.497589,930.720032 345.875610,932.306213 350.923737,930.135132 + C350.009216,927.922302 349.180267,925.916565 347.977051,923.005249 + C349.671295,923.804443 350.536652,924.099854 351.280640,924.582336 + C355.466064,927.296631 359.659149,929.066101 364.994995,929.370667 + C369.887848,929.649963 374.882202,932.078674 379.376343,934.430664 + C385.126617,937.440063 390.791687,937.467468 396.761139,935.972961 + C402.442688,934.550720 408.122437,933.121399 413.902679,931.339478 +z"/> +<path fill="#F7A543" opacity="1.000000" stroke="none" + d=" +M756.843567,335.649292 + C755.682190,339.062775 754.340759,342.194855 752.964478,345.700867 + C742.848145,336.165771 732.237610,326.958344 719.326721,320.816620 + C716.783264,319.606689 714.208862,318.461761 711.331421,317.127136 + C712.242615,316.778168 713.554565,316.208710 714.687195,316.457092 + C729.995605,319.814392 743.908691,326.317169 756.843567,335.649292 +z"/> +<path fill="#FDA836" opacity="1.000000" stroke="none" + d=" +M280.186279,854.166626 + C280.590881,854.073914 281.179199,854.224792 281.920135,854.671204 + C281.505157,854.781189 280.937561,854.595703 280.186279,854.166626 +z"/> +<path fill="#FDA836" opacity="1.000000" stroke="none" + d=" +M279.898254,853.120605 + C280.117950,853.159851 280.223358,853.318909 280.205566,853.736877 + C279.704010,853.814636 279.604553,853.562805 279.898254,853.120605 +z"/> +<path fill="#FFBD76" opacity="1.000000" stroke="none" + d=" +M856.997559,550.000000 + C856.997559,605.190002 856.997559,659.880066 856.997559,714.570068 + C856.742004,714.569580 856.486450,714.569092 856.230896,714.568542 + C856.230896,646.226257 856.230896,577.883972 856.230896,509.541626 + C856.486450,509.538391 856.742004,509.535126 856.997559,509.531891 + C856.997559,522.854614 856.997559,536.177307 856.997559,550.000000 +z"/> +<path fill="#FFBD76" opacity="1.000000" stroke="none" + d=" +M855.997559,445.000549 + C855.997559,438.547302 855.997559,432.593872 855.997559,426.640411 + C856.213379,426.640930 856.429199,426.641449 856.645020,426.641968 + C856.645020,446.943817 856.645020,467.245667 856.645020,487.547516 + C856.429199,487.550537 856.213379,487.553558 855.997559,487.556549 + C855.997559,473.537842 855.997559,459.519104 855.997559,445.000549 +z"/> +<path fill="#FFBD76" opacity="1.000000" stroke="none" + d=" +M855.997559,808.555298 + C855.997559,790.214783 855.997559,772.313599 855.997559,754.412415 + C856.243958,754.413391 856.490356,754.414307 856.736755,754.415222 + C856.736755,773.754272 856.736755,793.093262 856.736755,812.432251 + C856.578003,812.446655 856.419250,812.461060 856.260498,812.475464 + C856.172852,811.315247 856.085205,810.154968 855.997559,808.555298 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M844.997559,602.161743 + C845.117126,600.460510 845.236633,599.185974 845.356201,597.911438 + C845.684021,597.916809 846.011902,597.922180 846.339722,597.927551 + C846.339722,601.296143 846.339722,604.664795 846.339722,608.033386 + C845.892334,608.058594 845.444946,608.083740 844.997559,608.108948 + C844.997559,606.268738 844.997559,604.428589 844.997559,602.161743 +z"/> +<path fill="#FFBD76" opacity="1.000000" stroke="none" + d=" +M856.018616,420.559082 + C856.052856,419.664551 856.098877,419.054138 856.144897,418.443726 + C856.343811,418.444092 856.542786,418.444489 856.741760,418.444885 + C856.741760,419.466217 856.747070,420.487610 856.727539,421.508575 + C856.726440,421.564087 856.518494,421.615692 856.406860,421.669098 + C856.281372,421.393799 856.155884,421.118500 856.018616,420.559082 +z"/> +<path fill="#EFC381" opacity="1.000000" stroke="none" + d=" +M739.385437,953.109375 + C740.384216,952.721252 741.806152,952.359619 743.615234,951.997803 + C744.002441,951.997559 744.002747,952.344543 744.004517,952.517944 + C742.607056,952.839539 741.207764,952.987732 739.385437,953.109375 +z"/> +<path fill="#EFC381" opacity="1.000000" stroke="none" + d=" +M346.796021,953.139404 + C477.111450,953.015930 607.222900,953.027039 737.834778,953.072876 + C732.557312,953.471008 726.779480,954.148071 721.001465,954.150757 + C630.607910,954.192749 540.214294,954.139587 449.820709,954.126892 + C415.527924,954.122131 381.235168,954.164368 346.479370,954.119751 + C346.143494,953.746460 346.335419,953.486328 346.796021,953.139404 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M180.564713,888.501587 + C185.097229,888.573730 186.232300,891.567139 185.890808,896.063843 + C184.133316,893.952515 182.407700,891.398071 180.564713,888.501587 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M207.658966,921.424744 + C210.445160,920.842712 212.488144,921.854431 212.988617,925.421936 + C212.665527,925.807068 212.354584,925.720764 211.848190,925.427856 + C210.365097,924.121948 209.107803,922.913208 207.658966,921.424744 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M199.109039,913.318115 + C200.642563,914.422729 202.313446,915.821899 204.001526,917.588135 + C202.427948,916.507690 200.837189,915.060181 199.109039,913.318115 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M205.102859,919.234253 + C205.307281,919.145752 205.551910,919.346619 205.872284,919.809692 + C205.652847,919.940186 205.384537,919.757385 205.102859,919.234253 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M204.131653,918.220581 + C204.328430,918.139038 204.563873,918.337646 204.877426,918.785278 + C204.654968,918.925659 204.393250,918.747742 204.131653,918.220581 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M198.065399,912.238525 + C198.284836,912.139648 198.535645,912.344788 198.861755,912.819946 + C198.704941,912.848755 198.424850,912.666321 198.065399,912.238525 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M193.026886,906.286377 + C193.205826,906.266235 193.469131,906.507568 193.834290,907.001099 + C193.661179,907.018188 193.386230,906.783020 193.026886,906.286377 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M186.173950,897.272583 + C186.393066,897.192993 186.609207,897.404358 186.868210,897.878357 + C186.614944,898.025513 186.368225,897.833008 186.173950,897.272583 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M186.989243,898.323853 + C187.187790,898.317566 187.460892,898.608215 187.825546,899.191650 + C187.632660,899.196533 187.348221,898.908630 186.989243,898.323853 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M188.202271,900.269287 + C188.410507,900.189331 188.620224,900.384644 188.885345,900.820435 + C188.653412,900.964111 188.407745,900.791992 188.202271,900.269287 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M189.072021,901.271606 + C189.240036,901.263672 189.492950,901.513672 189.841278,902.017456 + C189.676758,902.023987 189.416840,901.776672 189.072021,901.271606 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M191.132080,904.248657 + C191.337585,904.158203 191.570862,904.351379 191.877441,904.794434 + C191.655960,904.936646 191.392334,904.765930 191.132080,904.248657 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M192.088135,905.246460 + C192.305328,905.152527 192.550140,905.360535 192.858292,905.843689 + C192.704681,905.867920 192.436050,905.677795 192.088135,905.246460 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M214.705933,927.427490 + C218.226273,928.241699 222.122910,928.983582 225.661499,930.539734 + C229.235718,932.111450 232.829391,934.060791 235.749908,936.607056 + C241.385727,941.520691 248.240509,943.010132 255.063782,944.938782 + C256.554169,945.360046 257.638184,947.219116 258.877930,948.818420 + C253.246033,947.403687 247.645523,945.586548 241.673523,943.691772 + C236.918732,941.306946 232.535446,938.999817 227.820953,936.574585 + C226.244507,935.628296 224.999268,934.800171 223.433960,933.916199 + C220.384354,931.811035 217.654785,929.761658 214.705933,927.427490 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M259.050751,949.351562 + C259.414948,949.238953 259.970612,949.351013 260.737427,949.657593 + C260.379791,949.760193 259.811005,949.668213 259.050751,949.351562 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M262.725647,950.340088 + C263.123688,950.220886 263.776215,950.327087 264.687195,950.638916 + C264.290497,950.751526 263.635315,950.658508 262.725647,950.340088 +z"/> +<path fill="#2E2C2A" opacity="1.000000" stroke="none" + d=" +M478.348419,743.347900 + C455.210907,766.641052 432.325043,789.685913 409.428772,812.720459 + C398.964447,823.247986 392.577515,823.682678 380.711761,815.029541 + C358.390045,798.751282 336.016266,782.544189 313.634674,766.348206 + C308.485413,762.622070 304.857025,758.026367 305.405609,751.358704 + C306.343109,739.964172 318.782501,734.122070 328.527679,740.756042 + C338.425537,747.493896 347.914215,754.833557 357.570435,761.925415 + C369.358521,770.583130 381.134491,779.257324 392.887909,787.903931 + C402.497681,778.461243 412.187042,769.147583 421.647522,759.606934 + C454.484741,726.491394 487.175385,693.229980 520.144531,660.246765 + C523.108032,657.281982 527.463562,654.944580 531.551514,654.052673 + C537.212158,652.817749 541.907532,655.862061 544.815735,660.940613 + C547.714111,666.002258 547.541199,671.199585 544.325562,676.045410 + C542.776978,678.379089 540.766357,680.441223 538.781982,682.445190 + C518.741638,702.683411 498.663422,722.884033 478.348419,743.347900 +z"/> +<path fill="#FA6874" opacity="1.000000" stroke="none" + d=" +M593.420898,547.380493 + C587.876953,532.894287 591.945801,520.028687 604.713928,511.268127 + C613.009094,505.576569 622.493408,502.910583 632.282715,501.611450 + C653.758911,498.761261 675.140747,498.679108 695.949158,505.874756 + C705.594299,509.210144 713.404175,515.040283 717.625061,524.607910 + C724.129761,539.352295 716.867798,556.312317 700.942017,564.045959 + C690.086609,569.317322 678.396240,570.794800 666.527588,571.451294 + C650.300415,572.348877 634.203430,571.600586 618.538757,566.947998 + C607.850586,563.773560 598.709778,558.279968 593.420898,547.380493 +z"/> +<path fill="#FA6874" opacity="1.000000" stroke="none" + d=" +M430.520630,521.645142 + C438.867523,538.172668 432.444458,555.846741 415.380096,564.060608 + C404.512909,569.291504 392.799683,570.704712 380.966400,571.480652 + C365.764771,572.477539 350.641968,571.840271 335.888275,567.858521 + C330.658661,566.447205 325.442627,564.265930 320.819763,561.451599 + C301.548828,549.719604 300.820587,525.188904 319.125580,511.965790 + C327.736176,505.745728 337.681488,503.097290 347.966248,501.604187 + C366.927155,498.851624 385.820618,499.216125 404.435089,504.045685 + C414.973907,506.780029 424.412872,511.494080 430.520630,521.645142 +z"/> +<path fill="#54E6DD" opacity="1.000000" stroke="none" + d=" +M683.619385,745.466919 + C700.328857,746.028748 707.980652,763.200256 699.725586,774.944824 + C695.674194,780.708801 690.032715,783.173584 683.002625,783.160950 + C646.186951,783.094604 609.371033,783.142639 572.555237,783.141907 + C557.395813,783.141663 542.236023,783.172302 527.076965,783.090088 + C514.631836,783.022522 505.949615,775.067200 506.035461,763.984863 + C506.119385,753.155151 514.636780,745.744324 527.290955,745.732788 + C574.934998,745.689270 622.578979,745.717346 670.223022,745.693970 + C674.549194,745.691833 678.875183,745.513611 683.619385,745.466919 +z"/> +<path fill="#2E2C2B" opacity="1.000000" stroke="none" + d=" +M573.774963,517.974915 + C579.713318,522.207764 581.639832,527.759460 580.340332,534.374939 + C575.193726,560.573547 558.985962,577.006897 534.178406,585.122131 + C505.757721,594.419189 473.917084,585.187134 456.439301,563.146667 + C449.907104,554.909119 445.820068,545.483887 444.109802,535.145996 + C441.973785,522.234802 451.910858,512.758362 463.056824,516.828613 + C468.217896,518.713257 471.571320,522.458679 472.075714,527.791504 + C474.801666,556.611938 513.555176,568.437317 537.482544,551.629333 + C545.466309,546.021118 550.224304,538.380920 552.040833,528.681213 + C554.096924,517.702332 563.290527,513.203308 573.774963,517.974915 +z"/> +<path fill="#2E2B2B" opacity="1.000000" stroke="none" + d=" +M339.727905,431.729614 + C366.645386,406.159454 407.427307,408.627106 428.760559,437.055054 + C431.594604,440.831604 433.785217,445.326324 435.282349,449.818817 + C437.887146,457.635101 434.161804,465.975098 427.099426,469.884247 + C420.260956,473.669586 412.669189,472.167053 406.737183,465.999939 + C401.674011,460.736115 396.940247,455.024902 391.265015,450.512360 + C383.656525,444.462585 378.804321,444.608063 371.034668,450.868103 + C365.369873,455.432312 360.625397,461.126282 355.360992,466.202850 + C348.371613,472.942932 338.238922,472.561127 331.880798,465.395721 + C327.625061,460.599701 326.267822,454.662567 328.746185,449.117493 + C331.469757,443.023926 335.828156,437.661072 339.727905,431.729614 +z"/> +<path fill="#2E2C2B" opacity="1.000000" stroke="none" + d=" +M627.881714,452.842285 + C623.856323,457.079926 620.080261,461.064819 616.356384,465.097839 + C609.730530,472.273621 602.081177,473.821533 595.025513,469.367218 + C587.804260,464.808380 584.819092,455.860718 588.567383,447.426849 + C595.618164,431.562134 608.181335,421.662506 624.522034,416.614532 + C649.069153,409.031464 676.143799,418.297729 689.778137,438.934937 + C692.195496,442.593872 694.083984,446.886444 695.058716,451.151093 + C696.739807,458.505768 692.859985,465.590668 686.240051,469.049805 + C679.697083,472.468719 672.520691,471.415222 666.995239,465.968567 + C662.849915,461.882324 659.164978,457.305450 654.848511,453.421021 + C644.515686,444.122406 639.186340,444.087555 627.881714,452.842285 +z"/> +<path fill="#F7A543" opacity="1.000000" stroke="none" + d=" +M755.767639,349.434631 + C756.118408,349.550903 756.520142,349.956268 756.965637,350.658020 + C756.612427,350.544189 756.215515,350.133972 755.767639,349.434631 +z"/> +<path fill="#F7A543" opacity="1.000000" stroke="none" + d=" +M754.728271,348.381989 + C754.928955,348.308350 755.267212,348.504425 755.744934,348.965271 + C755.544861,349.037262 755.205383,348.844452 754.728271,348.381989 +z"/> +<path fill="#F7A543" opacity="1.000000" stroke="none" + d=" +M757.097778,351.261414 + C757.283936,351.237732 757.526184,351.471436 757.857178,351.945251 + C757.682007,351.963135 757.417908,351.740967 757.097778,351.261414 +z"/> +<path fill="#F7A543" opacity="1.000000" stroke="none" + d=" +M752.991760,346.306854 + C753.187683,346.278656 753.458069,346.521759 753.822815,347.025085 + C753.633545,347.049652 753.349854,346.813904 752.991760,346.306854 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M835.979858,827.381470 + C836.178833,827.963501 836.348572,828.921509 836.192383,829.951416 + C835.894592,829.267944 835.922607,828.512756 835.979858,827.381470 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M837.971436,818.370667 + C838.148560,818.952576 838.299622,819.897827 838.112549,820.875366 + C837.831360,820.183167 837.888306,819.458557 837.971436,818.370667 +z"/> +</svg>
\ No newline at end of file diff --git a/src/assets/old-screenshot-my-chore.png b/src/assets/old-screenshot-my-chore.png Binary files differnew file mode 100644 index 0000000..92a3a2d --- /dev/null +++ b/src/assets/old-screenshot-my-chore.png diff --git a/src/assets/screenshot-my-chore.png b/src/assets/screenshot-my-chore.png Binary files differnew file mode 100644 index 0000000..62880cb --- /dev/null +++ b/src/assets/screenshot-my-chore.png diff --git a/src/constants/theme.js b/src/constants/theme.js new file mode 100644 index 0000000..29b60a0 --- /dev/null +++ b/src/constants/theme.js @@ -0,0 +1,6 @@ +import resolveConfig from 'tailwindcss/resolveConfig' +import tailwindConfig from '/tailwind.config.js' + +export const { theme: THEME } = resolveConfig(tailwindConfig) + +export const COLORS = THEME.colors diff --git a/src/contexts/Contexts.jsx b/src/contexts/Contexts.jsx new file mode 100644 index 0000000..1269154 --- /dev/null +++ b/src/contexts/Contexts.jsx @@ -0,0 +1,13 @@ +import QueryContext from './QueryContext' +import RouterContext from './RouterContext' +import ThemeContext from './ThemeContext' + +const Contexts = () => { + const contexts = [ThemeContext, QueryContext, RouterContext] + + return contexts.reduceRight((acc, Context) => { + return <Context>{acc}</Context> + }, {}) +} + +export default Contexts diff --git a/src/contexts/QueryContext.jsx b/src/contexts/QueryContext.jsx new file mode 100644 index 0000000..3087d65 --- /dev/null +++ b/src/contexts/QueryContext.jsx @@ -0,0 +1,11 @@ +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' + +const QueryContext = ({ children }) => { + const queryClient = new QueryClient() + + return ( + <QueryClientProvider client={queryClient}>{children}</QueryClientProvider> + ) +} + +export default QueryContext diff --git a/src/contexts/RouterContext.jsx b/src/contexts/RouterContext.jsx new file mode 100644 index 0000000..6077092 --- /dev/null +++ b/src/contexts/RouterContext.jsx @@ -0,0 +1,116 @@ +import App from '@/App' +import ChoreEdit from '@/views/ChoreEdit/ChoreEdit' +import ChoresOverview from '@/views/ChoresOverview' +import Error from '@/views/Error' +import Settings from '@/views/Settings/Settings' +import { RouterProvider, createBrowserRouter } from 'react-router-dom' +import ForgotPasswordView from '../views/Authorization/ForgotPasswordView' +import LoginView from '../views/Authorization/LoginView' +import SignupView from '../views/Authorization/Signup' +import UpdatePasswordView from '../views/Authorization/UpdatePasswordView' +import MyChores from '../views/Chores/MyChores' +import JoinCircleView from '../views/Circles/JoinCircle' +import ChoreHistory from '../views/History/ChoreHistory' +import Landing from '../views/Landing/Landing' +import PaymentCancelledView from '../views/Payments/PaymentFailView' +import PaymentSuccessView from '../views/Payments/PaymentSuccessView' +import PrivacyPolicyView from '../views/PrivacyPolicy/PrivacyPolicyView' +import TermsView from '../views/Terms/TermsView' +import TestView from '../views/TestView/Test' +import ThingsHistory from '../views/Things/ThingsHistory' +import ThingsView from '../views/Things/ThingsView' +const Router = createBrowserRouter([ + { + path: '/', + element: <App />, + errorElement: <Error />, + children: [ + { + path: '/', + element: <Landing />, + }, + { + path: '/settings', + element: <Settings />, + }, + { + path: '/chores', + element: <ChoresOverview />, + }, + { + path: '/chores/:choreId/edit', + element: <ChoreEdit />, + }, + { + path: '/chores/create', + element: <ChoreEdit />, + }, + { + path: '/chores/:choreId/history', + element: <ChoreHistory />, + }, + { + path: '/my/chores', + element: <MyChores />, + }, + { + path: '/login', + element: <LoginView />, + }, + { + path: '/signup', + element: <SignupView />, + }, + { + path: '/landing', + element: <Landing />, + }, + { + path: '/test', + element: <TestView />, + }, + { + path: '/forgot-password', + element: <ForgotPasswordView />, + }, + { + path: '/password/update', + element: <UpdatePasswordView />, + }, + { + path: '/privacy', + element: <PrivacyPolicyView />, + }, + { + path: '/terms', + element: <TermsView />, + }, + { + path: 'circle/join', + element: <JoinCircleView />, + }, + { + path: 'payments/success', + element: <PaymentSuccessView />, + }, + { + path: 'payments/cancel', + element: <PaymentCancelledView />, + }, + { + path: 'things', + element: <ThingsView />, + }, + { + path: 'things/:id', + element: <ThingsHistory />, + }, + ], + }, +]) + +const RouterContext = ({ children }) => { + return <RouterProvider router={Router} /> +} + +export default RouterContext diff --git a/src/contexts/ThemeContext.jsx b/src/contexts/ThemeContext.jsx new file mode 100644 index 0000000..45e91b5 --- /dev/null +++ b/src/contexts/ThemeContext.jsx @@ -0,0 +1,86 @@ +import { COLORS } from '@/constants/theme' +import { CssBaseline } from '@mui/joy' +import { CssVarsProvider, extendTheme } from '@mui/joy/styles' +import PropType from 'prop-types' + +const primaryColor = 'cyan' + +const shades = [ + '50', + ...Array.from({ length: 9 }, (_, i) => String((i + 1) * 100)), +] + +const getPallete = (key = primaryColor) => { + return shades.reduce((acc, shade) => { + acc[shade] = COLORS[key][shade] + return acc + }, {}) +} + +const primaryPalette = getPallete(primaryColor) + +const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + primary: primaryPalette, + success: { + 50: '#f3faf7', + 100: '#def5eb', + 200: '#b7e7d5', + 300: '#8ed9be', + 400: '#6ecdb0', + 500: '#4ec1a2', + 600: '#46b89a', + 700: '#3cae91', + 800: '#32a487', + 900: '#229d76', + }, + danger: { + 50: '#fef2f2', + 100: '#fde8e8', + 200: '#fbd5d5', + 300: '#f9c1c1', + 400: '#f6a8a8', + 500: '', + 600: '#f47272', + 700: '#e33434', + 800: '#cc1f1a', + 900: '#b91c1c', + }, + }, + warning: { + 50: '#fffdf7', + 100: '#fef8e1', + 200: '#fdecb2', + 300: '#fcd982', + 400: '#fbcf52', + 500: '#f9c222', + 600: '#f6b81e', + 700: '#f3ae1a', + 800: '#f0a416', + 900: '#e99b0e', + }, + }, + }, + dark: { + palette: { + primary: primaryPalette, + }, + }, +}) + +const ThemeContext = ({ children }) => { + return ( + <CssVarsProvider theme={theme}> + <CssBaseline /> + {children} + </CssVarsProvider> + ) +} + +ThemeContext.propTypes = { + children: PropType.node, +} + +export default ThemeContext diff --git a/src/contexts/UserContext.js b/src/contexts/UserContext.js new file mode 100644 index 0000000..7d2527e --- /dev/null +++ b/src/contexts/UserContext.js @@ -0,0 +1,8 @@ +import { createContext } from 'react' + +const UserContext = createContext({ + userProfile: null, + setUserProfile: () => {}, +}) + +export { UserContext } diff --git a/src/hooks/useStickyState.js b/src/hooks/useStickyState.js new file mode 100644 index 0000000..237362a --- /dev/null +++ b/src/hooks/useStickyState.js @@ -0,0 +1,16 @@ +import { useEffect, useState } from 'react' + +const useStickyState = (defaultValue, key) => { + const [value, setValue] = useState(() => { + const stickyValue = window.localStorage.getItem(key) + return stickyValue !== null ? JSON.parse(stickyValue) : defaultValue + }) + + useEffect(() => { + window.localStorage.setItem(key, JSON.stringify(value)) + }, [key, value]) + + return [value, setValue] +} + +export default useStickyState diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..4e6fcdd --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import Contexts from './contexts/Contexts.jsx' +import './index.css' + +ReactDOM.createRoot(document.getElementById('root')).render( + <React.StrictMode> + <Contexts /> + </React.StrictMode>, +) diff --git a/src/manifest/android-chrome-192x192.png b/src/manifest/android-chrome-192x192.png Binary files differnew file mode 100644 index 0000000..2f74125 --- /dev/null +++ b/src/manifest/android-chrome-192x192.png diff --git a/src/manifest/android-chrome-512x512.png b/src/manifest/android-chrome-512x512.png Binary files differnew file mode 100644 index 0000000..86d6620 --- /dev/null +++ b/src/manifest/android-chrome-512x512.png diff --git a/src/manifest/apple-touch-icon.png b/src/manifest/apple-touch-icon.png Binary files differnew file mode 100644 index 0000000..ebdd14f --- /dev/null +++ b/src/manifest/apple-touch-icon.png diff --git a/src/manifest/browserconfig.xml b/src/manifest/browserconfig.xml new file mode 100644 index 0000000..b3930d0 --- /dev/null +++ b/src/manifest/browserconfig.xml @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<browserconfig> + <msapplication> + <tile> + <square150x150logo src="/mstile-150x150.png"/> + <TileColor>#da532c</TileColor> + </tile> + </msapplication> +</browserconfig> diff --git a/src/manifest/favicon-16x16.png b/src/manifest/favicon-16x16.png Binary files differnew file mode 100644 index 0000000..83d1748 --- /dev/null +++ b/src/manifest/favicon-16x16.png diff --git a/src/manifest/favicon-32x32.png b/src/manifest/favicon-32x32.png Binary files differnew file mode 100644 index 0000000..8d4788b --- /dev/null +++ b/src/manifest/favicon-32x32.png diff --git a/src/manifest/favicon.ico b/src/manifest/favicon.ico Binary files differnew file mode 100644 index 0000000..eb40bda --- /dev/null +++ b/src/manifest/favicon.ico diff --git a/src/manifest/logo.svg b/src/manifest/logo.svg new file mode 100644 index 0000000..f205a47 --- /dev/null +++ b/src/manifest/logo.svg @@ -0,0 +1,1185 @@ +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="100%" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve"> + +<path fill="#B5BEFB" opacity="1.000000" stroke="none" + d=" +M457.067200,42.686905 + C459.447144,26.832342 469.528015,16.203293 481.577301,7.055771 + C484.583862,4.773226 488.270081,3.385903 491.321960,1.293556 + C503.687561,1.000000 516.375122,1.000000 529.531372,1.000004 + C532.877991,2.985393 535.601196,5.258084 538.660706,6.906528 + C552.035889,14.112956 561.123352,24.814444 565.647583,39.326729 + C566.080750,40.716061 566.044800,42.251637 566.534424,44.416672 + C566.269714,53.474617 565.697205,61.835217 565.124695,70.195816 + C562.884399,82.024635 556.006897,90.798393 546.797058,98.042542 + C545.892578,98.753990 545.048767,99.542503 543.702881,100.681946 + C542.668823,101.562706 542.108643,102.056770 540.874512,103.145233 + C543.896545,103.378769 546.007507,103.627136 548.124084,103.692657 + C579.398621,104.660835 610.777283,101.454941 641.961609,106.044365 + C641.961609,106.044365 641.997559,106.000000 642.232666,106.281258 + C643.636841,106.730606 644.805908,106.898689 645.975037,107.066772 + C645.975037,107.066772 646.399109,107.196709 646.814575,107.547272 + C648.802185,108.297722 650.374390,108.697617 651.946533,109.097511 + C651.946533,109.097511 652.334167,109.251457 652.673218,109.635696 + C655.649536,111.048347 658.286804,112.076759 660.924011,113.105164 + C660.924011,113.105164 661.338745,113.293716 661.638184,113.612358 + C662.257812,113.993759 662.577942,114.056519 662.898132,114.119278 + C662.898132,114.119278 663.313416,114.351051 663.616821,114.670654 + C663.920227,114.990265 664.358093,115.225540 664.358093,115.225540 + C664.358093,115.225540 664.843811,115.120506 664.843811,115.120506 + C664.843811,115.120506 664.924805,115.072365 664.949219,115.443268 + C665.933105,116.254326 666.892517,116.694481 667.851990,117.134628 + C667.851990,117.134621 667.947266,117.053314 667.981079,117.440826 + C669.021606,118.253540 670.028381,118.678749 671.271301,119.170792 + C671.824585,119.286629 672.140808,119.341209 672.622070,119.696716 + C679.759644,127.731895 687.501282,134.920029 693.530396,143.335159 + C703.686951,157.510941 709.115906,173.618210 708.473145,191.277771 + C681.710510,191.293823 655.410950,191.385529 629.111389,191.401764 + C529.069275,191.463501 429.027130,191.500854 328.965271,191.124725 + C330.406860,167.369614 339.520386,147.529587 356.163544,131.138840 + C359.916351,127.442932 363.727966,123.806702 367.806641,120.045158 + C369.087769,118.981110 370.074799,118.014900 371.061859,117.048691 + C371.061859,117.048691 371.013489,116.999557 371.355469,117.107140 + C371.996918,116.890915 372.296387,116.567116 372.595886,116.243324 + C372.595886,116.243332 372.563263,116.098564 373.016327,116.232864 + C373.845886,115.978600 374.222382,115.590034 374.598877,115.201477 + C374.598877,115.201469 374.529510,115.009590 374.926147,115.148865 + C375.885895,114.907318 376.448944,114.526497 377.012024,114.145676 + C383.126526,111.437981 389.241028,108.730270 396.026550,106.213028 + C424.273346,100.114319 452.383545,104.830887 480.419342,102.608955 + C479.972687,101.906181 479.796143,101.424187 479.455841,101.134781 + C478.702362,100.494049 477.866638,99.950081 477.064423,99.366669 + C472.619659,94.664429 467.385376,90.467857 463.956818,85.114799 + C460.664032,79.973732 459.242096,73.634453 456.975769,66.983047 + C456.991394,58.325230 457.029297,50.506069 457.067200,42.686905 +M495.040314,43.670990 + C486.376251,56.938816 493.815094,72.260345 507.730530,74.933403 + C517.515564,76.813034 529.649231,68.062172 531.328369,59.447845 + C532.796204,51.917713 530.302063,46.677364 526.017822,41.704769 + C518.169128,32.594967 503.036163,33.744705 495.040314,43.670990 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M367.512543,120.143005 + C363.727966,123.806702 359.916351,127.442932 356.163544,131.138840 + C339.520386,147.529587 330.406860,167.369614 328.768921,191.520508 + C328.478699,198.661301 328.300964,204.983322 328.263184,211.306168 + C328.132141,233.240723 334.086792,239.255035 355.925262,239.252853 + C463.741425,239.242065 571.557556,239.221786 679.373718,239.197357 + C683.039307,239.196518 686.712097,239.247787 690.369019,239.046799 + C700.273621,238.502396 708.806946,230.141632 709.049622,220.303772 + C709.287842,210.648895 708.995605,200.980957 708.936157,191.318741 + C709.115906,173.618210 703.686951,157.510941 693.530396,143.335159 + C687.501282,134.920029 679.759644,127.731895 673.147339,119.643036 + C691.453796,119.205421 709.400879,119.116837 727.348022,119.028259 + C743.718384,119.185036 759.522888,122.356789 774.749939,128.267838 + C786.922852,132.993240 797.822937,139.913391 808.099548,148.875977 + C808.958862,149.589859 809.502563,149.758560 810.046326,149.927246 + C810.046326,149.927246 810.021057,149.975540 810.086792,150.276672 + C810.779724,151.029556 811.406799,151.481308 812.033936,151.933075 + C812.033936,151.933060 812.019409,151.965164 812.138550,152.173523 + C812.441711,152.643311 812.684631,152.826950 812.986328,152.932816 + C812.986328,152.932816 813.059509,152.936432 813.168884,153.175323 + C813.468811,153.665741 813.713806,153.841400 814.013184,153.941177 + C814.013184,153.941177 814.051208,153.950363 814.088745,154.311172 + C818.032654,158.893280 821.994446,163.064835 825.836121,167.344177 + C846.403625,190.254852 856.329895,217.527451 856.795593,247.912750 + C857.175781,272.717957 857.808350,297.541016 854.362427,322.368683 + C852.379761,336.653229 853.979675,351.360748 856.036316,365.862640 + C857.653748,377.267303 859.067017,388.958374 853.599670,400.041992 + C852.912598,401.434784 852.977539,403.305450 853.038879,404.941803 + C853.287476,411.573303 853.994141,418.202515 853.938171,424.827576 + C853.815247,439.383301 853.345520,453.936340 852.972229,468.489319 + C852.938599,469.801819 852.610535,471.112061 852.363953,472.412842 + C850.920166,480.029877 848.397461,487.615387 848.193176,495.263733 + C847.398071,525.033203 847.340332,554.822327 846.994141,584.603882 + C846.972412,586.474854 846.830505,588.344421 846.744507,590.214600 + C846.145996,590.232544 845.547485,590.250549 844.948975,590.268494 + C844.658142,587.152283 844.109802,584.033447 844.141357,580.920532 + C844.181458,576.954102 844.996338,572.987915 844.935974,569.029785 + C844.796814,559.899963 844.151367,550.777222 844.039978,541.647644 + C843.875366,528.157349 844.023315,514.663452 843.973206,501.171417 + C843.962769,498.366394 844.243896,495.191406 839.997925,494.538177 + C839.326233,478.318695 839.758423,462.430847 837.779663,446.849182 + C834.529297,421.255829 823.151123,398.918518 805.493042,380.181274 + C793.981995,367.966766 781.588867,356.570251 769.352356,345.060852 + C765.653015,341.581299 761.155518,338.950317 756.843567,335.649292 + C743.908691,326.317169 729.995605,319.814392 714.687195,316.457092 + C713.554565,316.208710 712.242615,316.778168 710.639099,316.950745 + C698.542175,312.221039 686.391602,309.916016 673.730347,309.923553 + C565.775574,309.987640 457.820831,309.968811 349.866089,310.059326 + C344.561615,310.063751 339.193878,310.469238 333.963470,311.337677 + C280.783264,320.168030 243.279373,364.230225 243.023254,418.147522 + C242.903763,443.303101 242.982635,468.459686 242.985275,493.615814 + C242.994949,586.243652 242.955917,678.871582 243.061478,771.499329 + C243.088242,794.982666 249.616028,816.593689 263.836487,835.442505 + C268.606262,841.764709 274.585938,847.174133 279.898254,853.120605 + C279.604553,853.562805 279.704010,853.814636 280.044067,853.997742 + C280.005829,853.999634 280.002563,853.923096 280.186279,854.166626 + C280.937561,854.595703 281.505157,854.781189 282.037994,854.970215 + C282.003235,854.973633 282.046844,854.919006 282.027588,855.286072 + C283.158875,857.410828 284.116425,859.338989 285.492432,860.897583 + C292.535645,868.875305 299.851685,876.616882 306.761627,884.706421 + C317.245636,896.980347 329.179504,907.451233 343.404388,915.154358 + C365.429352,927.081238 388.899506,932.710754 413.902679,931.339478 + C408.122437,933.121399 402.442688,934.550720 396.761139,935.972961 + C390.791687,937.467468 385.126617,937.440063 379.376343,934.430664 + C374.882202,932.078674 369.887848,929.649963 364.994995,929.370667 + C359.659149,929.066101 355.466064,927.296631 351.280640,924.582336 + C350.536652,924.099854 349.671295,923.804443 347.977051,923.005249 + C349.180267,925.916565 350.009216,927.922302 350.923737,930.135132 + C345.875610,932.306213 339.497589,930.720032 336.486237,936.514343 + C336.331818,936.811401 335.562317,936.919800 335.088043,936.900391 + C324.405731,936.462463 313.717834,936.111389 303.045990,935.486938 + C296.836243,935.123596 290.664795,934.695129 285.914490,939.670166 + C283.610229,942.083435 281.634979,942.063660 278.927979,940.412354 + C276.570862,938.974487 273.935120,937.459961 271.281799,937.137634 + C262.104797,936.022888 253.458191,933.694641 245.492767,928.815491 + C238.599548,924.593079 231.271408,921.058594 224.521591,916.631348 + C219.204956,913.144165 214.256332,909.001465 209.550766,904.704773 + C205.226151,900.755737 201.842072,895.720215 197.316742,892.062683 + C192.335907,888.036987 190.979248,882.060059 187.697311,877.163818 + C185.246872,873.508179 183.672867,869.253052 181.818619,865.214294 + C180.663101,862.697388 178.861938,860.101013 178.817535,857.515076 + C178.628326,846.496338 173.810349,837.184875 168.344193,827.855835 + C167.921219,832.154236 167.309845,836.566223 168.032440,840.747681 + C170.493652,854.990051 175.235184,868.571350 181.171188,881.728210 + C182.196503,884.000732 182.235214,885.558777 179.185074,885.971924 + C174.280182,873.505493 169.628265,861.253113 164.956284,848.705566 + C164.636017,848.262268 164.335815,848.114014 164.035629,847.965759 + C164.035629,847.965759 164.018539,847.998840 164.312347,847.753601 + C164.076660,845.324341 163.547180,843.140381 163.017685,840.956360 + C163.017685,840.956360 163.043472,840.974731 163.221771,840.560669 + C163.123734,837.398071 162.847382,834.649475 162.610870,831.475159 + C162.540268,823.223755 162.330643,815.398010 162.334015,807.572449 + C162.415344,619.038269 162.519424,430.504120 162.764160,241.573059 + C164.396896,224.044144 169.042175,207.829910 176.951843,192.546234 + C177.533127,191.422989 177.651611,190.060211 177.985229,188.808792 + C180.320938,185.255600 182.656647,181.702408 185.368835,177.754288 + C188.851440,173.245544 191.957565,169.131729 195.063690,165.017914 + C195.063675,165.017914 195.003845,165.003922 195.364883,165.080093 + C199.946686,161.225510 204.181549,157.309738 208.382980,153.358398 + C210.961136,150.933762 213.488052,148.454681 216.037979,146.000031 + C216.037979,146.000031 216.029800,146.033829 216.361084,146.145721 + C217.813522,145.179688 218.934677,144.101730 220.055832,143.023773 + C220.055832,143.023773 220.000656,143.001984 220.359589,143.120880 + C222.158813,142.152878 223.599106,141.065979 225.039383,139.979095 + C225.039383,139.979095 225.032379,140.038437 225.349579,140.081543 + C226.460587,139.416077 227.254410,138.707520 228.048218,137.998962 + C228.048218,137.998962 228.037643,138.048889 228.387024,138.114716 + C233.485779,135.763092 238.235138,133.345642 243.359009,130.899567 + C250.604446,128.297592 257.475372,125.724258 264.346283,123.150917 + C264.346283,123.150917 264.479218,123.093704 264.901001,123.138603 + C265.551697,123.137711 265.780579,123.091919 266.430298,123.052216 + C274.237335,121.799263 281.623535,120.540222 289.476929,119.317017 + C314.376343,119.306656 338.808563,119.244797 363.240784,119.254318 + C364.664825,119.254875 366.088623,119.833435 367.512543,120.143005 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M840.018799,495.007324 + C844.243896,495.191406 843.962769,498.366394 843.973206,501.171417 + C844.023315,514.663452 843.875366,528.157349 844.039978,541.647644 + C844.151367,550.777222 844.796814,559.899963 844.935974,569.029785 + C844.996338,572.987915 844.181458,576.954102 844.141357,580.920532 + C844.109802,584.033447 844.658142,587.152283 844.948975,590.268494 + C845.547485,590.250549 846.145996,590.232544 846.744507,590.214600 + C846.830505,588.344421 846.972412,586.474854 846.994141,584.603882 + C847.340332,554.822327 847.398071,525.033203 848.193176,495.263733 + C848.397461,487.615387 850.920166,480.029877 852.363953,472.412842 + C852.610535,471.112061 852.938599,469.801819 852.972229,468.489319 + C853.345520,453.936340 853.815247,439.383301 853.938171,424.827576 + C853.994141,418.202515 853.287476,411.573303 853.038879,404.941803 + C852.977539,403.305450 852.912598,401.434784 853.599670,400.041992 + C859.067017,388.958374 857.653748,377.267303 856.036316,365.862640 + C853.979675,351.360748 852.379761,336.653229 854.362427,322.368683 + C857.808350,297.541016 857.175781,272.717957 856.795593,247.912750 + C856.329895,217.527451 846.403625,190.254852 825.836121,167.344177 + C821.994446,163.064835 818.032654,158.893280 814.095337,154.329620 + C820.264893,160.224182 826.899231,166.093796 832.564697,172.783936 + C841.113281,182.878738 846.997009,194.774704 851.359863,207.113754 + C854.489685,215.965591 855.696167,225.527374 857.407471,234.837357 + C858.177551,239.026825 858.343750,243.374557 858.346741,247.650787 + C858.401428,326.463135 858.385925,405.275482 858.399048,484.087860 + C858.400269,491.249817 858.513855,498.411652 858.543823,505.573700 + C858.844360,577.417786 859.186035,649.261780 859.413391,721.106079 + C859.523010,755.761902 859.915344,790.429138 859.178833,825.069885 + C858.842896,840.865723 855.393066,856.446045 849.288391,871.254150 + C839.527588,894.930969 823.921387,914.099121 803.508240,929.201782 + C795.927734,934.810120 787.249023,939.034180 778.781982,943.318115 + C768.792419,948.372375 758.154053,951.665405 746.162720,952.788208 + C744.932739,952.769287 744.469482,952.730286 744.004517,952.517944 + C744.002747,952.344543 744.002441,951.997559 744.390686,951.930542 + C770.306152,947.103455 792.922974,936.492004 812.617310,919.343201 + C829.715393,904.455261 841.866272,886.435974 849.380493,865.190491 + C851.441040,859.364441 854.719177,853.565063 851.139221,847.075500 + C850.650146,846.188904 850.874817,844.733948 851.141113,843.632019 + C854.427124,830.033813 850.615173,817.046753 847.751892,803.987915 + C847.554016,803.085510 846.639954,802.340088 845.998352,801.436340 + C843.891052,803.736511 845.286621,809.205322 839.863281,806.469971 + C839.903625,797.339233 839.957275,788.672791 839.959473,780.006409 + C839.983948,685.006714 840.000244,590.007019 840.018799,495.007324 +M856.997559,549.500000 + C856.997559,536.177307 856.997559,522.854614 856.997559,509.531891 + C856.742004,509.535126 856.486450,509.538391 856.230896,509.541626 + C856.230896,577.883972 856.230896,646.226257 856.230896,714.568542 + C856.486450,714.569092 856.742004,714.569580 856.997559,714.570068 + C856.997559,659.880066 856.997559,605.190002 856.997559,549.500000 +M855.997559,445.500366 + C855.997559,459.519104 855.997559,473.537842 855.997559,487.556549 + C856.213379,487.553558 856.429199,487.550537 856.645020,487.547516 + C856.645020,467.245667 856.645020,446.943817 856.645020,426.641968 + C856.429199,426.641449 856.213379,426.640930 855.997559,426.640411 + C855.997559,432.593872 855.997559,438.547302 855.997559,445.500366 +M855.997498,808.994690 + C856.085205,810.154968 856.172852,811.315247 856.260498,812.475464 + C856.419250,812.461060 856.578003,812.446655 856.736755,812.432251 + C856.736755,793.093262 856.736755,773.754272 856.736755,754.415222 + C856.490356,754.414307 856.243958,754.413391 855.997559,754.412415 + C855.997559,772.313599 855.997559,790.214783 855.997498,808.994690 +M844.997559,602.588379 + C844.997559,604.428589 844.997559,606.268738 844.997559,608.108948 + C845.444946,608.083740 845.892334,608.058594 846.339722,608.033386 + C846.339722,604.664795 846.339722,601.296143 846.339722,597.927551 + C846.011902,597.922180 845.684021,597.916809 845.356201,597.911438 + C845.236633,599.185974 845.117126,600.460510 844.997559,602.588379 +M856.030396,420.843170 + C856.155884,421.118500 856.281372,421.393799 856.406860,421.669098 + C856.518494,421.615692 856.726440,421.564087 856.727539,421.508575 + C856.747070,420.487610 856.741760,419.466217 856.741760,418.444885 + C856.542786,418.444489 856.343811,418.444092 856.144897,418.443726 + C856.098877,419.054138 856.052856,419.664551 856.030396,420.843170 +z"/> +<path fill="#637E63" opacity="1.000000" stroke="none" + d=" +M744.006287,952.691284 + C744.469482,952.730286 744.932739,952.769287 745.739624,952.877441 + C741.887573,953.948425 737.692993,955.819275 733.495789,955.825012 + C622.607300,955.977966 511.718536,955.925293 400.829803,955.938599 + C362.204681,955.943237 323.579346,956.101257 284.954834,955.969238 + C280.997284,955.955750 277.044922,954.428162 273.326263,953.260864 + C297.713715,953.297180 321.865051,953.675781 346.479370,954.119751 + C381.235168,954.164368 415.527924,954.122131 449.820709,954.126892 + C540.214294,954.139587 630.607910,954.192749 721.001465,954.150757 + C726.779480,954.148071 732.557312,953.471008 738.494019,953.152161 + C738.652832,953.196716 738.962341,953.082825 739.385437,953.109375 + C741.207764,952.987732 742.607056,952.839539 744.006287,952.691284 +z"/> +<path fill="#06b6d4" opacity="1.000000" stroke="none" + d=" +M162.619415,241.969971 + C162.519424,430.504120 162.415344,619.038269 162.334015,807.572449 + C162.330643,815.398010 162.540268,823.223755 162.438629,831.472839 + C162.226593,831.896301 161.889160,831.966003 161.889160,831.966003 + C161.592010,826.450500 161.246964,820.936951 161.017670,815.418579 + C160.900940,812.609009 160.992310,809.790710 160.987473,806.040527 + C160.990158,722.842468 161.000259,640.580322 160.964508,558.318115 + C160.963745,556.565186 160.435410,554.812500 160.153198,553.059692 + C160.112396,550.988770 160.071609,548.917847 160.337311,546.068665 + C160.760559,544.471375 160.978836,543.652466 160.979370,542.833374 + C160.997757,514.500916 161.006149,486.168457 160.961838,457.836121 + C160.959839,456.563782 160.453461,455.292236 160.182007,454.020325 + C160.112488,423.247040 160.009888,392.473785 159.981750,361.700470 + C159.945847,322.438934 159.951889,283.177307 160.025192,243.915878 + C160.028671,242.056046 160.859131,240.197739 161.656052,238.478958 + C162.211578,239.736115 162.415497,240.853043 162.619415,241.969971 +z"/> +<path fill="#00FFFF" opacity="1.000000" stroke="none" + d=" +M160.084442,553.520630 + C160.435410,554.812500 160.963745,556.565186 160.964508,558.318115 + C161.000259,640.580322 160.990158,722.842468 160.966766,805.575073 + C160.632248,804.539062 160.040527,803.032654 160.039810,801.526062 + C160.000397,719.011230 160.010559,636.496460 160.084442,553.520630 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M346.016357,954.054382 + C321.865051,953.675781 297.713715,953.297180 273.080811,952.937500 + C272.599182,952.956421 272.260376,952.915649 271.814270,952.691528 + C270.052246,952.081604 268.736267,951.695740 267.846802,951.220337 + C273.580353,948.060608 279.073853,950.637390 284.459656,950.717957 + C290.397705,950.806763 296.328369,951.926453 302.258606,951.895813 + C315.678070,951.826538 329.094482,951.260254 342.514587,951.093689 + C344.001587,951.075256 345.504486,952.336853 346.796021,953.139404 + C346.335419,953.486328 346.143494,953.746460 346.016357,954.054382 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M641.746216,105.740341 + C610.777283,101.454941 579.398621,104.660835 548.124084,103.692657 + C546.007507,103.627136 543.896545,103.378769 540.874512,103.145233 + C542.108643,102.056770 542.668823,101.562706 543.529297,100.978439 + C545.653198,101.292381 547.475647,102.042229 549.300537,102.048439 + C573.962708,102.132462 598.628418,101.899818 623.285339,102.270638 + C629.381653,102.362328 635.449768,104.330650 641.746216,105.740341 +z"/> +<path fill="#41C99D" opacity="1.000000" stroke="none" + d=" +M164.976349,849.000671 + C169.628265,861.253113 174.280182,873.505493 179.244354,886.247498 + C179.853500,887.211243 180.150436,887.685425 180.564713,888.501587 + C182.407700,891.398071 184.133316,893.952515 185.871307,896.666260 + C185.883682,896.825439 186.124237,897.035461 186.173950,897.272583 + C186.368225,897.833008 186.614944,898.025513 186.973724,898.053894 + C186.983658,898.020691 186.914673,898.026978 186.989227,898.323853 + C187.348221,898.908630 187.632660,899.196533 187.921509,899.647583 + C187.925919,899.810669 188.155853,900.042297 188.202271,900.269287 + C188.407745,900.791992 188.653412,900.964111 188.992844,901.006348 + C189.000000,901.000000 188.987137,901.013733 189.072021,901.271606 + C189.416840,901.776672 189.676758,902.023987 189.986023,902.537720 + C190.376892,903.208923 190.718445,903.613770 191.132080,904.248657 + C191.392334,904.765930 191.655960,904.936646 191.995972,904.996582 + C191.996902,905.002441 192.008835,905.005249 192.088135,905.246460 + C192.436050,905.677795 192.704681,905.867920 192.985931,906.030884 + C192.998520,906.003723 192.942551,906.024902 193.026917,906.286377 + C193.386230,906.783020 193.661179,907.018188 194.038177,907.552002 + C195.422150,909.231506 196.704071,910.612366 198.065399,912.238525 + C198.424850,912.666321 198.704941,912.848755 198.991333,913.014404 + C198.997620,912.997559 198.971634,913.023621 199.109039,913.318115 + C200.837189,915.060181 202.427948,916.507690 204.009216,917.979614 + C203.999710,918.003967 204.050385,917.991028 204.131653,918.220581 + C204.393250,918.747742 204.654968,918.925659 204.996948,918.994019 + C204.995773,919.004211 205.016068,919.001587 205.102859,919.234253 + C205.384537,919.757385 205.652847,919.940186 206.087311,920.246948 + C206.609146,920.700745 207.038300,920.922852 207.658997,921.424683 + C209.107803,922.913208 210.365097,924.121948 211.452667,925.513550 + C211.282928,925.696411 210.943954,926.062683 210.943939,926.062683 + C206.682892,922.596985 201.948410,919.565918 198.273193,915.562439 + C192.928619,909.740662 187.658661,903.631897 183.609131,896.893005 + C178.115723,887.751404 173.389374,878.078918 169.146606,868.282227 + C166.637726,862.489136 165.696335,856.017273 164.316650,849.426147 + C164.583221,849.001587 164.976349,849.000671 164.976349,849.000671 +z"/> +<path fill="#2CC4AC" opacity="1.000000" stroke="none" + d=" +M477.001221,99.704071 + C477.866638,99.950081 478.702362,100.494049 479.455841,101.134781 + C479.796143,101.424187 479.972687,101.906181 480.419342,102.608955 + C452.383545,104.830887 424.273346,100.114319 396.427979,106.251633 + C398.961578,105.079697 401.693359,103.568764 404.583801,103.148270 + C409.605164,102.417793 414.722748,102.103699 419.803162,102.068298 + C437.947723,101.941887 456.093781,102.035713 474.238251,101.903366 + C475.076782,101.897263 478.206116,103.684158 477.001221,99.704071 +z"/> +<path fill="#47C698" opacity="1.000000" stroke="none" + d=" +M162.764160,241.573059 + C162.415497,240.853043 162.211578,239.736115 162.000977,238.265656 + C163.086914,225.607986 164.658722,213.449402 170.869873,202.393097 + C173.269608,198.121384 175.208389,193.590683 177.671204,188.993378 + C177.651611,190.060211 177.533127,191.422989 176.951843,192.546234 + C169.042175,207.829910 164.396896,224.044144 162.764160,241.573059 +z"/> +<path fill="#00FF99" opacity="1.000000" stroke="none" + d=" +M160.113678,454.484558 + C160.453461,455.292236 160.959839,456.563782 160.961838,457.836121 + C161.006149,486.168457 160.997757,514.500916 160.979370,542.833374 + C160.978836,543.652466 160.760559,544.471375 160.412903,545.630859 + C160.136429,515.630432 160.090897,485.289642 160.113678,454.484558 +z"/> +<path fill="#2CC79F" opacity="1.000000" stroke="none" + d=" +M367.806641,120.045166 + C366.088623,119.833435 364.664825,119.254875 363.240784,119.254318 + C338.808563,119.244797 314.376343,119.306656 289.466949,119.043747 + C288.965912,118.554092 288.942047,118.373535 288.918152,118.192978 + C310.462250,118.128761 332.006836,118.127151 353.550110,117.957306 + C359.096130,117.913589 364.637970,117.340462 370.621796,117.029617 + C370.074799,118.014900 369.087769,118.981110 367.806641,120.045166 +z"/> +<path fill="#48D09A" opacity="1.000000" stroke="none" + d=" +M215.668030,145.999268 + C213.488052,148.454681 210.961136,150.933762 208.382980,153.358398 + C204.181549,157.309738 199.946686,161.225510 195.377960,165.107895 + C197.868362,161.645493 200.404190,157.906754 203.626160,154.904373 + C207.189178,151.584167 211.380432,148.938141 215.668030,145.999268 +z"/> +<path fill="#449678" opacity="1.000000" stroke="none" + d=" +M727.067993,118.662300 + C709.400879,119.116837 691.453796,119.205421 672.981384,119.347687 + C672.140808,119.341209 671.824585,119.286629 671.263428,118.966019 + C671.019348,118.694420 671.004333,118.285271 671.004333,118.285271 + C689.598877,118.288956 708.193420,118.292648 727.067993,118.662300 +z"/> +<path fill="#41C99D" opacity="1.000000" stroke="none" + d=" +M267.420319,951.309875 + C268.736267,951.695740 270.052246,952.081604 271.647125,952.657349 + C261.184357,952.121094 250.886978,949.728455 241.210999,944.257202 + C241.124313,943.833984 241.302032,943.614014 241.673523,943.691711 + C247.645523,945.586548 253.246033,947.403687 258.878174,949.201233 + C258.909851,949.181641 258.859283,949.126953 259.050751,949.351562 + C259.811005,949.668213 260.379791,949.760193 261.184509,949.979858 + C261.770721,950.109863 262.120941,950.112305 262.725647,950.340088 + C263.635315,950.658508 264.290497,950.751526 265.240295,950.977417 + C266.163361,951.176880 266.791840,951.243347 267.420319,951.309875 +z"/> +<path fill="#4CD298" opacity="1.000000" stroke="none" + d=" +M263.904022,123.090408 + C257.475372,125.724258 250.604446,128.297592 243.360748,130.718353 + C242.987946,130.565765 242.990158,130.203278 242.990158,130.203278 + C249.814026,127.812149 256.637878,125.421021 263.904022,123.090408 +z"/> +<path fill="#5CCD95" opacity="1.000000" stroke="none" + d=" +M288.503784,118.129204 + C288.942047,118.373535 288.965912,118.554092 288.999756,119.007919 + C281.623535,120.540222 274.237335,121.799263 266.433289,122.843079 + C266.015411,122.627853 266.037292,122.210213 266.037292,122.210220 + C273.388000,120.828621 280.738739,119.447021 288.503784,118.129204 +z"/> +<path fill="#48D09A" opacity="1.000000" stroke="none" + d=" +M242.617218,130.138428 + C242.990158,130.203278 242.987946,130.565765 242.986221,130.746979 + C238.235138,133.345642 233.485779,135.763092 228.361542,138.113708 + C232.739182,135.389130 237.491730,132.731339 242.617218,130.138428 +z"/> +<path fill="#31C5B1" opacity="1.000000" stroke="none" + d=" +M456.722168,42.940254 + C457.029297,50.506069 456.991394,58.325230 456.912781,66.575485 + C456.267456,65.588051 455.105225,64.150276 455.153412,62.754272 + C455.378571,56.227737 455.937469,49.712730 456.722168,42.940254 +z"/> +<path fill="#48D09A" opacity="1.000000" stroke="none" + d=" +M194.731934,165.100403 + C191.957565,169.131729 188.851440,173.245544 185.454941,177.380219 + C188.243088,173.328354 191.321625,169.255615 194.731934,165.100403 +z"/> +<path fill="#41C99D" opacity="1.000000" stroke="none" + d=" +M241.034378,943.943115 + C236.364349,941.944641 231.784271,939.837036 227.207275,937.247192 + C227.210373,936.764832 227.489731,936.456482 227.820953,936.574585 + C232.535446,938.999817 236.918732,941.306946 241.302032,943.614014 + C241.302032,943.614014 241.124313,943.833984 241.034378,943.943115 +z"/> +<path fill="#7F9DA3" opacity="1.000000" stroke="none" + d=" +M565.498962,70.090500 + C565.697205,61.835217 566.269714,53.474617 566.854797,44.657387 + C568.783508,52.882217 569.156189,61.504173 565.498962,70.090500 +z"/> +<path fill="#41C99D" opacity="1.000000" stroke="none" + d=" +M222.393082,934.758179 + C218.668427,932.067688 214.943787,929.377136 211.081543,926.374634 + C210.943954,926.062683 211.282928,925.696411 211.678467,925.610718 + C212.354584,925.720764 212.665527,925.807068 213.145172,925.999390 + C213.684586,926.524109 214.085602,926.833435 214.705933,927.427551 + C217.654785,929.761658 220.384354,931.811035 222.928955,934.081055 + C222.627045,934.453796 222.510071,934.606018 222.393082,934.758179 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M660.805725,112.763794 + C658.286804,112.076759 655.649536,111.048347 652.868408,109.709381 + C655.378784,110.406677 658.033081,111.414543 660.805725,112.763794 +z"/> +<path fill="#47C698" opacity="1.000000" stroke="none" + d=" +M161.939117,832.409668 + C161.889160,831.966003 162.226593,831.896301 162.398819,831.898621 + C162.847382,834.649475 163.123734,837.398071 163.225769,840.575989 + C162.697311,838.288025 162.343185,835.570740 161.939117,832.409668 +z"/> +<path fill="#47C698" opacity="1.000000" stroke="none" + d=" +M163.015701,841.388062 + C163.547180,843.140381 164.076660,845.324341 164.330139,847.747437 + C163.707321,845.930847 163.360519,843.875305 163.015701,841.388062 +z"/> +<path fill="#48D09A" opacity="1.000000" stroke="none" + d=" +M224.683655,140.010986 + C223.599106,141.065979 222.158813,142.152878 220.364136,143.150177 + C221.449112,142.054703 222.888519,141.048782 224.683655,140.010986 +z"/> +<path fill="#41C99D" opacity="1.000000" stroke="none" + d=" +M227.070450,936.918762 + C225.548859,936.480225 224.167191,935.887756 222.589325,935.026733 + C222.510071,934.606018 222.627045,934.453796 223.249023,934.136841 + C224.999268,934.800171 226.244507,935.628296 227.489746,936.456421 + C227.489731,936.456482 227.210373,936.764832 227.070450,936.918762 +z"/> +<path fill="#48D09A" opacity="1.000000" stroke="none" + d=" +M219.701996,143.018097 + C218.934677,144.101730 217.813522,145.179688 216.344193,146.149841 + C217.113388,145.032181 218.230759,144.022293 219.701996,143.018097 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M651.792419,108.764847 + C650.374390,108.697617 648.802185,108.297722 647.027466,107.609283 + C648.429382,107.691216 650.033813,108.061699 651.792419,108.764847 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M670.700195,118.123581 + C671.004333,118.285271 671.019348,118.694420 671.027222,118.899185 + C670.028381,118.678749 669.021606,118.253540 667.947815,117.493896 + C668.719177,117.426941 669.557617,117.694420 670.700195,118.123581 +z"/> +<path fill="#48D09A" opacity="1.000000" stroke="none" + d=" +M227.711273,138.013611 + C227.254410,138.707520 226.460587,139.416077 225.319763,140.079605 + C225.773285,139.365799 226.573792,138.697021 227.711273,138.013611 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M645.786377,106.748795 + C644.805908,106.898689 643.636841,106.730606 642.216980,106.304337 + C643.176697,106.174377 644.387207,106.302605 645.786377,106.748795 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M667.772827,116.825638 + C666.892517,116.694481 665.933105,116.254326 664.925537,115.483963 + C665.816101,115.608055 666.754883,116.062347 667.772827,116.825638 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M811.957642,151.649704 + C811.406799,151.481308 810.779724,151.029556 810.111206,150.264404 + C810.673645,150.422791 811.277527,150.894562 811.957642,151.649704 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M809.940186,149.637283 + C809.502563,149.758560 808.958862,149.589859 808.242065,149.189255 + C808.657410,149.087341 809.245667,149.217331 809.940186,149.637283 +z"/> +<path fill="#2CC79F" opacity="1.000000" stroke="none" + d=" +M376.637695,114.066193 + C376.448944,114.526497 375.885895,114.907318 374.968872,115.242020 + C375.164398,114.792831 375.713898,114.389771 376.637695,114.066193 +z"/> +<path fill="#4CD298" opacity="1.000000" stroke="none" + d=" +M265.734436,122.203903 + C266.037292,122.210213 266.015411,122.627853 266.012451,122.836990 + C265.780579,123.091919 265.551697,123.137711 264.973267,123.142502 + C264.893005,122.800194 265.162262,122.498901 265.734436,122.203903 +z"/> +<path fill="#47C698" opacity="1.000000" stroke="none" + d=" +M164.956284,848.705566 + C164.976349,849.000671 164.583221,849.001587 164.386658,849.000122 + C164.141586,848.829895 164.093094,848.661194 164.040100,848.229126 + C164.335815,848.114014 164.636017,848.262268 164.956284,848.705566 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M664.806885,114.837517 + C664.843811,115.120506 664.358093,115.225540 664.358093,115.225540 + C664.358093,115.225540 663.920227,114.990265 663.839233,114.754814 + C664.095459,114.531090 664.432678,114.542809 664.806885,114.837517 +z"/> +<path fill="#2CC79F" opacity="1.000000" stroke="none" + d=" +M374.187561,115.149109 + C374.222382,115.590034 373.845886,115.978600 373.052734,116.297516 + C373.016144,115.850822 373.396210,115.473778 374.187561,115.149109 +z"/> +<path fill="#5C818F" opacity="1.000000" stroke="none" + d=" +M662.845642,113.837112 + C662.577942,114.056519 662.257812,113.993759 661.853149,113.687759 + C662.110168,113.481331 662.451660,113.518135 662.845642,113.837112 +z"/> +<path fill="#2CC79F" opacity="1.000000" stroke="none" + d=" +M372.250732,116.187820 + C372.296387,116.567116 371.996918,116.890915 371.363922,117.140533 + C371.322144,116.754997 371.613892,116.443657 372.250732,116.187820 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M813.953918,153.702118 + C813.713806,153.841400 813.468811,153.665741 813.172302,153.211761 + C813.431458,152.998047 813.707520,153.149307 813.953918,153.702118 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M812.928528,152.694763 + C812.684631,152.826950 812.441711,152.643311 812.156128,152.173676 + C812.407043,151.995728 812.679077,152.159485 812.928528,152.694763 +z"/> +<path fill="#2E2B2B" opacity="1.000000" stroke="none" + d=" +M708.473145,191.277771 + C708.995605,200.980957 709.287842,210.648895 709.049622,220.303772 + C708.806946,230.141632 700.273621,238.502396 690.369019,239.046799 + C686.712097,239.247787 683.039307,239.196518 679.373718,239.197357 + C571.557556,239.221786 463.741425,239.242065 355.925262,239.252853 + C334.086792,239.255035 328.132141,233.240723 328.263184,211.306168 + C328.300964,204.983322 328.478699,198.661301 328.788635,191.943115 + C429.027130,191.500854 529.069275,191.463501 629.111389,191.401764 + C655.410950,191.385529 681.710510,191.293823 708.473145,191.277771 +z"/> +<path fill="#000100" opacity="1.000000" stroke="none" + d=" +M495.262878,43.353783 + C503.036163,33.744705 518.169128,32.594967 526.017822,41.704769 + C530.302063,46.677364 532.796204,51.917713 531.328369,59.447845 + C529.649231,68.062172 517.515564,76.813034 507.730530,74.933403 + C493.815094,72.260345 486.376251,56.938816 495.262878,43.353783 +z"/> +<path fill="#FFFEFD" opacity="1.000000" stroke="none" + d=" +M280.012543,853.000793 + C274.585938,847.174133 268.606262,841.764709 263.836487,835.442505 + C249.616028,816.593689 243.088242,794.982666 243.061478,771.499329 + C242.955917,678.871582 242.994949,586.243652 242.985275,493.615814 + C242.982635,468.459686 242.903763,443.303101 243.023254,418.147522 + C243.279373,364.230225 280.783264,320.168030 333.963470,311.337677 + C339.193878,310.469238 344.561615,310.063751 349.866089,310.059326 + C457.820831,309.968811 565.775574,309.987640 673.730347,309.923553 + C686.391602,309.916016 698.542175,312.221039 710.956421,317.110474 + C714.208862,318.461761 716.783264,319.606689 719.326721,320.816620 + C732.237610,326.958344 742.848145,336.165771 752.962769,346.053680 + C752.996033,346.032593 752.917358,346.035553 752.991760,346.306854 + C753.349854,346.813904 753.633545,347.049652 753.956970,347.473633 + C754.117798,347.913452 754.315796,348.063599 754.728271,348.381989 + C755.205383,348.844452 755.544861,349.037262 755.866516,349.161255 + C755.848633,349.092407 755.716675,349.145508 755.767639,349.434631 + C756.215515,350.133972 756.612427,350.544189 756.999573,350.978455 + C756.989746,351.002502 757.041687,351.004028 757.097778,351.261414 + C757.417908,351.740967 757.682007,351.963135 758.055969,352.502197 + C772.532837,372.286804 778.836487,394.112030 778.797241,418.299408 + C778.605347,536.619324 778.744690,654.939697 778.686584,773.259949 + C778.683960,778.568298 778.346191,783.955933 777.413147,789.172180 + C768.127808,841.082336 724.888916,878.058533 672.145813,878.212402 + C564.658691,878.525879 457.169952,878.385803 349.682343,878.192505 + C341.100525,878.177063 332.413483,876.854980 323.965576,875.180359 + C308.323730,872.079590 294.769073,864.267273 282.046844,854.919006 + C282.046844,854.919006 282.003235,854.973633 281.885376,854.674683 + C281.179199,854.224792 280.590881,854.073914 280.002563,853.923096 + C280.002563,853.923096 280.005829,853.999634 280.167297,853.738770 + C280.223358,853.318909 280.117950,853.159851 280.012543,853.000793 +M478.595825,743.095276 + C498.663422,722.884033 518.741638,702.683411 538.781982,682.445190 + C540.766357,680.441223 542.776978,678.379089 544.325562,676.045410 + C547.541199,671.199585 547.714111,666.002258 544.815735,660.940613 + C541.907532,655.862061 537.212158,652.817749 531.551514,654.052673 + C527.463562,654.944580 523.108032,657.281982 520.144531,660.246765 + C487.175385,693.229980 454.484741,726.491394 421.647522,759.606934 + C412.187042,769.147583 402.497681,778.461243 392.887909,787.903931 + C381.134491,779.257324 369.358521,770.583130 357.570435,761.925415 + C347.914215,754.833557 338.425537,747.493896 328.527679,740.756042 + C318.782501,734.122070 306.343109,739.964172 305.405609,751.358704 + C304.857025,758.026367 308.485413,762.622070 313.634674,766.348206 + C336.016266,782.544189 358.390045,798.751282 380.711761,815.029541 + C392.577515,823.682678 398.964447,823.247986 409.428772,812.720459 + C432.325043,789.685913 455.210907,766.641052 478.595825,743.095276 +M593.593506,547.724487 + C598.709778,558.279968 607.850586,563.773560 618.538757,566.947998 + C634.203430,571.600586 650.300415,572.348877 666.527588,571.451294 + C678.396240,570.794800 690.086609,569.317322 700.942017,564.045959 + C716.867798,556.312317 724.129761,539.352295 717.625061,524.607910 + C713.404175,515.040283 705.594299,509.210144 695.949158,505.874756 + C675.140747,498.679108 653.758911,498.761261 632.282715,501.611450 + C622.493408,502.910583 613.009094,505.576569 604.713928,511.268127 + C591.945801,520.028687 587.876953,532.894287 593.593506,547.724487 +M430.311920,521.333984 + C424.412872,511.494080 414.973907,506.780029 404.435089,504.045685 + C385.820618,499.216125 366.927155,498.851624 347.966248,501.604187 + C337.681488,503.097290 327.736176,505.745728 319.125580,511.965790 + C300.820587,525.188904 301.548828,549.719604 320.819763,561.451599 + C325.442627,564.265930 330.658661,566.447205 335.888275,567.858521 + C350.641968,571.840271 365.764771,572.477539 380.966400,571.480652 + C392.799683,570.704712 404.512909,569.291504 415.380096,564.060608 + C432.444458,555.846741 438.867523,538.172668 430.311920,521.333984 +M683.201294,745.417236 + C678.875183,745.513611 674.549194,745.691833 670.223022,745.693970 + C622.578979,745.717346 574.934998,745.689270 527.290955,745.732788 + C514.636780,745.744324 506.119385,753.155151 506.035461,763.984863 + C505.949615,775.067200 514.631836,783.022522 527.076965,783.090088 + C542.236023,783.172302 557.395813,783.141663 572.555237,783.141907 + C609.371033,783.142639 646.186951,783.094604 683.002625,783.160950 + C690.032715,783.173584 695.674194,780.708801 699.725586,774.944824 + C707.980652,763.200256 700.328857,746.028748 683.201294,745.417236 +M573.435547,517.796875 + C563.290527,513.203308 554.096924,517.702332 552.040833,528.681213 + C550.224304,538.380920 545.466309,546.021118 537.482544,551.629333 + C513.555176,568.437317 474.801666,556.611938 472.075714,527.791504 + C471.571320,522.458679 468.217896,518.713257 463.056824,516.828613 + C451.910858,512.758362 441.973785,522.234802 444.109802,535.145996 + C445.820068,545.483887 449.907104,554.909119 456.439301,563.146667 + C473.917084,585.187134 505.757721,594.419189 534.178406,585.122131 + C558.985962,577.006897 575.193726,560.573547 580.340332,534.374939 + C581.639832,527.759460 579.713318,522.207764 573.435547,517.796875 +M339.474243,431.979828 + C335.828156,437.661072 331.469757,443.023926 328.746185,449.117493 + C326.267822,454.662567 327.625061,460.599701 331.880798,465.395721 + C338.238922,472.561127 348.371613,472.942932 355.360992,466.202850 + C360.625397,461.126282 365.369873,455.432312 371.034668,450.868103 + C378.804321,444.608063 383.656525,444.462585 391.265015,450.512360 + C396.940247,455.024902 401.674011,460.736115 406.737183,465.999939 + C412.669189,472.167053 420.260956,473.669586 427.099426,469.884247 + C434.161804,465.975098 437.887146,457.635101 435.282349,449.818817 + C433.785217,445.326324 431.594604,440.831604 428.760559,437.055054 + C407.427307,408.627106 366.645386,406.159454 339.474243,431.979828 +M628.154541,452.611237 + C639.186340,444.087555 644.515686,444.122406 654.848511,453.421021 + C659.164978,457.305450 662.849915,461.882324 666.995239,465.968567 + C672.520691,471.415222 679.697083,472.468719 686.240051,469.049805 + C692.859985,465.590668 696.739807,458.505768 695.058716,451.151093 + C694.083984,446.886444 692.195496,442.593872 689.778137,438.934937 + C676.143799,418.297729 649.069153,409.031464 624.522034,416.614532 + C608.181335,421.662506 595.618164,431.562134 588.567383,447.426849 + C584.819092,455.860718 587.804260,464.808380 595.025513,469.367218 + C602.081177,473.821533 609.730530,472.273621 616.356384,465.097839 + C620.080261,461.064819 623.856323,457.079926 628.154541,452.611237 +z"/> +<path fill="#FDA836" opacity="1.000000" stroke="none" + d=" +M282.027588,855.286072 + C294.769073,864.267273 308.323730,872.079590 323.965576,875.180359 + C332.413483,876.854980 341.100525,878.177063 349.682343,878.192505 + C457.169952,878.385803 564.658691,878.525879 672.145813,878.212402 + C724.888916,878.058533 768.127808,841.082336 777.413147,789.172180 + C778.346191,783.955933 778.683960,778.568298 778.686584,773.259949 + C778.744690,654.939697 778.605347,536.619324 778.797241,418.299408 + C778.836487,394.112030 772.532837,372.286804 757.967163,352.262115 + C757.526184,351.471436 757.283936,351.237732 757.041687,351.004028 + C757.041687,351.004028 756.989746,351.002502 756.955811,350.682068 + C756.520142,349.956268 756.118408,349.550903 755.716675,349.145508 + C755.716675,349.145508 755.848633,349.092407 755.727051,348.896423 + C755.267212,348.504425 754.928955,348.308350 754.590698,348.112305 + C754.315796,348.063599 754.117798,347.913452 753.862549,347.213348 + C753.458069,346.521759 753.187683,346.278656 752.917358,346.035553 + C752.917358,346.035553 752.996033,346.032593 752.997681,345.679779 + C754.340759,342.194855 755.682190,339.062775 757.023621,335.930664 + C761.155518,338.950317 765.653015,341.581299 769.352356,345.060852 + C781.588867,356.570251 793.981995,367.966766 805.493042,380.181274 + C823.151123,398.918518 834.529297,421.255829 837.779663,446.849182 + C839.758423,462.430847 839.326233,478.318695 839.997925,494.538177 + C840.000244,590.007019 839.983948,685.006714 839.959473,780.006409 + C839.957275,788.672791 839.903625,797.339233 839.643494,806.797852 + C838.941223,811.062500 838.469360,814.534912 837.971436,818.370667 + C837.888306,819.458557 837.831360,820.183167 837.563110,821.188965 + C836.904236,823.315308 836.456665,825.160400 835.979858,827.381470 + C835.922607,828.512756 835.894592,829.267944 835.624756,830.283691 + C833.067017,836.462341 830.934265,842.460083 828.401245,848.283752 + C820.399475,866.680786 808.950439,882.542114 793.806335,895.831482 + C767.704224,918.736694 737.199402,930.656067 702.717712,930.805969 + C606.480835,931.224121 510.241028,930.971497 414.002380,930.983704 + C388.899506,932.710754 365.429352,927.081238 343.404388,915.154358 + C329.179504,907.451233 317.245636,896.980347 306.761627,884.706421 + C299.851685,876.616882 292.535645,868.875305 285.492432,860.897583 + C284.116425,859.338989 283.158875,857.410828 282.027588,855.286072 +z"/> +<path fill="#FDBD73" opacity="1.000000" stroke="none" + d=" +M413.902679,931.339478 + C510.241028,930.971497 606.480835,931.224121 702.717712,930.805969 + C737.199402,930.656067 767.704224,918.736694 793.806335,895.831482 + C808.950439,882.542114 820.399475,866.680786 828.401245,848.283752 + C830.934265,842.460083 833.067017,836.462341 835.950623,830.211914 + C836.348572,828.921509 836.178833,827.963501 836.009033,827.005432 + C836.456665,825.160400 836.904236,823.315308 837.901245,821.156677 + C838.299622,819.897827 838.148560,818.952576 837.997559,818.007324 + C838.469360,814.534912 838.941223,811.062500 839.632812,807.262207 + C845.286621,809.205322 843.891052,803.736511 845.998352,801.436340 + C846.639954,802.340088 847.554016,803.085510 847.751892,803.987915 + C850.615173,817.046753 854.427124,830.033813 851.141113,843.632019 + C850.874817,844.733948 850.650146,846.188904 851.139221,847.075500 + C854.719177,853.565063 851.441040,859.364441 849.380493,865.190491 + C841.866272,886.435974 829.715393,904.455261 812.617310,919.343201 + C792.922974,936.492004 770.306152,947.103455 744.003479,951.930786 + C741.806152,952.359619 740.384216,952.721252 738.962341,953.082825 + C738.962341,953.082825 738.652832,953.196716 737.993591,953.117432 + C607.222900,953.027039 477.111450,953.015930 347.000000,953.004822 + C345.504486,952.336853 344.001587,951.075256 342.514587,951.093689 + C329.094482,951.260254 315.678070,951.826538 302.258606,951.895813 + C296.328369,951.926453 290.397705,950.806763 284.459656,950.717957 + C279.073853,950.637390 273.580353,948.060608 267.846802,951.220337 + C266.791840,951.243347 266.163361,951.176880 264.981812,950.771851 + C263.776215,950.327087 263.123688,950.220886 262.471191,950.114746 + C262.120941,950.112305 261.770721,950.109863 260.973389,949.785278 + C259.970612,949.351013 259.414948,949.238953 258.859283,949.126953 + C258.859283,949.126953 258.909851,949.181641 258.909607,948.798828 + C257.638184,947.219116 256.554169,945.360046 255.063782,944.938782 + C248.240509,943.010132 241.385727,941.520691 235.749908,936.607056 + C232.829391,934.060791 229.235718,932.111450 225.661499,930.539734 + C222.122910,928.983582 218.226273,928.241699 214.486649,927.142700 + C214.085602,926.833435 213.684586,926.524109 213.126999,925.637329 + C212.488144,921.854431 210.445160,920.842712 207.467438,921.144897 + C207.038300,920.922852 206.609146,920.700745 205.964981,920.041443 + C205.551910,919.346619 205.307281,919.145752 205.016068,919.001587 + C205.016068,919.001587 204.995773,919.004211 204.876251,918.795471 + C204.563873,918.337646 204.328430,918.139038 204.050385,917.991028 + C204.050385,917.991028 203.999710,918.003967 203.992035,917.612488 + C202.313446,915.821899 200.642563,914.422729 198.971649,913.023560 + C198.971634,913.023621 198.997620,912.997559 198.868042,912.803101 + C198.535645,912.344788 198.284836,912.139648 197.986023,911.993164 + C196.704071,910.612366 195.422150,909.231506 193.936340,907.299805 + C193.469131,906.507568 193.205826,906.266235 192.942535,906.024902 + C192.942551,906.024902 192.998520,906.003723 192.870880,905.816528 + C192.550140,905.360535 192.305328,905.152527 192.008835,905.005249 + C192.008835,905.005249 191.996902,905.002441 191.878357,904.800293 + C191.570862,904.351379 191.337585,904.158203 191.059998,904.018555 + C190.718445,903.613770 190.376892,903.208923 189.890594,902.283875 + C189.492950,901.513672 189.240036,901.263672 188.987137,901.013733 + C188.987137,901.013733 189.000000,901.000000 188.892502,900.814087 + C188.620224,900.384644 188.410507,900.189331 188.155853,900.042297 + C188.155853,900.042297 187.925919,899.810669 187.829956,899.354736 + C187.460892,898.608215 187.187790,898.317566 186.914673,898.026978 + C186.914673,898.026978 186.983658,898.020691 186.878143,897.845154 + C186.609207,897.404358 186.393066,897.192993 186.124237,897.035461 + C186.124237,897.035461 185.883682,896.825439 185.903168,896.223083 + C186.232300,891.567139 185.097229,888.573730 180.447357,888.159607 + C180.150436,887.685425 179.853500,887.211243 179.497314,886.461426 + C182.235214,885.558777 182.196503,884.000732 181.171188,881.728210 + C175.235184,868.571350 170.493652,854.990051 168.032440,840.747681 + C167.309845,836.566223 167.921219,832.154236 168.344193,827.855835 + C173.810349,837.184875 178.628326,846.496338 178.817535,857.515076 + C178.861938,860.101013 180.663101,862.697388 181.818619,865.214294 + C183.672867,869.253052 185.246872,873.508179 187.697311,877.163818 + C190.979248,882.060059 192.335907,888.036987 197.316742,892.062683 + C201.842072,895.720215 205.226151,900.755737 209.550766,904.704773 + C214.256332,909.001465 219.204956,913.144165 224.521591,916.631348 + C231.271408,921.058594 238.599548,924.593079 245.492767,928.815491 + C253.458191,933.694641 262.104797,936.022888 271.281799,937.137634 + C273.935120,937.459961 276.570862,938.974487 278.927979,940.412354 + C281.634979,942.063660 283.610229,942.083435 285.914490,939.670166 + C290.664795,934.695129 296.836243,935.123596 303.045990,935.486938 + C313.717834,936.111389 324.405731,936.462463 335.088043,936.900391 + C335.562317,936.919800 336.331818,936.811401 336.486237,936.514343 + C339.497589,930.720032 345.875610,932.306213 350.923737,930.135132 + C350.009216,927.922302 349.180267,925.916565 347.977051,923.005249 + C349.671295,923.804443 350.536652,924.099854 351.280640,924.582336 + C355.466064,927.296631 359.659149,929.066101 364.994995,929.370667 + C369.887848,929.649963 374.882202,932.078674 379.376343,934.430664 + C385.126617,937.440063 390.791687,937.467468 396.761139,935.972961 + C402.442688,934.550720 408.122437,933.121399 413.902679,931.339478 +z"/> +<path fill="#F7A543" opacity="1.000000" stroke="none" + d=" +M756.843567,335.649292 + C755.682190,339.062775 754.340759,342.194855 752.964478,345.700867 + C742.848145,336.165771 732.237610,326.958344 719.326721,320.816620 + C716.783264,319.606689 714.208862,318.461761 711.331421,317.127136 + C712.242615,316.778168 713.554565,316.208710 714.687195,316.457092 + C729.995605,319.814392 743.908691,326.317169 756.843567,335.649292 +z"/> +<path fill="#FDA836" opacity="1.000000" stroke="none" + d=" +M280.186279,854.166626 + C280.590881,854.073914 281.179199,854.224792 281.920135,854.671204 + C281.505157,854.781189 280.937561,854.595703 280.186279,854.166626 +z"/> +<path fill="#FDA836" opacity="1.000000" stroke="none" + d=" +M279.898254,853.120605 + C280.117950,853.159851 280.223358,853.318909 280.205566,853.736877 + C279.704010,853.814636 279.604553,853.562805 279.898254,853.120605 +z"/> +<path fill="#FFBD76" opacity="1.000000" stroke="none" + d=" +M856.997559,550.000000 + C856.997559,605.190002 856.997559,659.880066 856.997559,714.570068 + C856.742004,714.569580 856.486450,714.569092 856.230896,714.568542 + C856.230896,646.226257 856.230896,577.883972 856.230896,509.541626 + C856.486450,509.538391 856.742004,509.535126 856.997559,509.531891 + C856.997559,522.854614 856.997559,536.177307 856.997559,550.000000 +z"/> +<path fill="#FFBD76" opacity="1.000000" stroke="none" + d=" +M855.997559,445.000549 + C855.997559,438.547302 855.997559,432.593872 855.997559,426.640411 + C856.213379,426.640930 856.429199,426.641449 856.645020,426.641968 + C856.645020,446.943817 856.645020,467.245667 856.645020,487.547516 + C856.429199,487.550537 856.213379,487.553558 855.997559,487.556549 + C855.997559,473.537842 855.997559,459.519104 855.997559,445.000549 +z"/> +<path fill="#FFBD76" opacity="1.000000" stroke="none" + d=" +M855.997559,808.555298 + C855.997559,790.214783 855.997559,772.313599 855.997559,754.412415 + C856.243958,754.413391 856.490356,754.414307 856.736755,754.415222 + C856.736755,773.754272 856.736755,793.093262 856.736755,812.432251 + C856.578003,812.446655 856.419250,812.461060 856.260498,812.475464 + C856.172852,811.315247 856.085205,810.154968 855.997559,808.555298 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M844.997559,602.161743 + C845.117126,600.460510 845.236633,599.185974 845.356201,597.911438 + C845.684021,597.916809 846.011902,597.922180 846.339722,597.927551 + C846.339722,601.296143 846.339722,604.664795 846.339722,608.033386 + C845.892334,608.058594 845.444946,608.083740 844.997559,608.108948 + C844.997559,606.268738 844.997559,604.428589 844.997559,602.161743 +z"/> +<path fill="#FFBD76" opacity="1.000000" stroke="none" + d=" +M856.018616,420.559082 + C856.052856,419.664551 856.098877,419.054138 856.144897,418.443726 + C856.343811,418.444092 856.542786,418.444489 856.741760,418.444885 + C856.741760,419.466217 856.747070,420.487610 856.727539,421.508575 + C856.726440,421.564087 856.518494,421.615692 856.406860,421.669098 + C856.281372,421.393799 856.155884,421.118500 856.018616,420.559082 +z"/> +<path fill="#EFC381" opacity="1.000000" stroke="none" + d=" +M739.385437,953.109375 + C740.384216,952.721252 741.806152,952.359619 743.615234,951.997803 + C744.002441,951.997559 744.002747,952.344543 744.004517,952.517944 + C742.607056,952.839539 741.207764,952.987732 739.385437,953.109375 +z"/> +<path fill="#EFC381" opacity="1.000000" stroke="none" + d=" +M346.796021,953.139404 + C477.111450,953.015930 607.222900,953.027039 737.834778,953.072876 + C732.557312,953.471008 726.779480,954.148071 721.001465,954.150757 + C630.607910,954.192749 540.214294,954.139587 449.820709,954.126892 + C415.527924,954.122131 381.235168,954.164368 346.479370,954.119751 + C346.143494,953.746460 346.335419,953.486328 346.796021,953.139404 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M180.564713,888.501587 + C185.097229,888.573730 186.232300,891.567139 185.890808,896.063843 + C184.133316,893.952515 182.407700,891.398071 180.564713,888.501587 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M207.658966,921.424744 + C210.445160,920.842712 212.488144,921.854431 212.988617,925.421936 + C212.665527,925.807068 212.354584,925.720764 211.848190,925.427856 + C210.365097,924.121948 209.107803,922.913208 207.658966,921.424744 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M199.109039,913.318115 + C200.642563,914.422729 202.313446,915.821899 204.001526,917.588135 + C202.427948,916.507690 200.837189,915.060181 199.109039,913.318115 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M205.102859,919.234253 + C205.307281,919.145752 205.551910,919.346619 205.872284,919.809692 + C205.652847,919.940186 205.384537,919.757385 205.102859,919.234253 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M204.131653,918.220581 + C204.328430,918.139038 204.563873,918.337646 204.877426,918.785278 + C204.654968,918.925659 204.393250,918.747742 204.131653,918.220581 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M198.065399,912.238525 + C198.284836,912.139648 198.535645,912.344788 198.861755,912.819946 + C198.704941,912.848755 198.424850,912.666321 198.065399,912.238525 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M193.026886,906.286377 + C193.205826,906.266235 193.469131,906.507568 193.834290,907.001099 + C193.661179,907.018188 193.386230,906.783020 193.026886,906.286377 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M186.173950,897.272583 + C186.393066,897.192993 186.609207,897.404358 186.868210,897.878357 + C186.614944,898.025513 186.368225,897.833008 186.173950,897.272583 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M186.989243,898.323853 + C187.187790,898.317566 187.460892,898.608215 187.825546,899.191650 + C187.632660,899.196533 187.348221,898.908630 186.989243,898.323853 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M188.202271,900.269287 + C188.410507,900.189331 188.620224,900.384644 188.885345,900.820435 + C188.653412,900.964111 188.407745,900.791992 188.202271,900.269287 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M189.072021,901.271606 + C189.240036,901.263672 189.492950,901.513672 189.841278,902.017456 + C189.676758,902.023987 189.416840,901.776672 189.072021,901.271606 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M191.132080,904.248657 + C191.337585,904.158203 191.570862,904.351379 191.877441,904.794434 + C191.655960,904.936646 191.392334,904.765930 191.132080,904.248657 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M192.088135,905.246460 + C192.305328,905.152527 192.550140,905.360535 192.858292,905.843689 + C192.704681,905.867920 192.436050,905.677795 192.088135,905.246460 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M214.705933,927.427490 + C218.226273,928.241699 222.122910,928.983582 225.661499,930.539734 + C229.235718,932.111450 232.829391,934.060791 235.749908,936.607056 + C241.385727,941.520691 248.240509,943.010132 255.063782,944.938782 + C256.554169,945.360046 257.638184,947.219116 258.877930,948.818420 + C253.246033,947.403687 247.645523,945.586548 241.673523,943.691772 + C236.918732,941.306946 232.535446,938.999817 227.820953,936.574585 + C226.244507,935.628296 224.999268,934.800171 223.433960,933.916199 + C220.384354,931.811035 217.654785,929.761658 214.705933,927.427490 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M259.050751,949.351562 + C259.414948,949.238953 259.970612,949.351013 260.737427,949.657593 + C260.379791,949.760193 259.811005,949.668213 259.050751,949.351562 +z"/> +<path fill="#FBBF74" opacity="1.000000" stroke="none" + d=" +M262.725647,950.340088 + C263.123688,950.220886 263.776215,950.327087 264.687195,950.638916 + C264.290497,950.751526 263.635315,950.658508 262.725647,950.340088 +z"/> +<path fill="#2E2C2A" opacity="1.000000" stroke="none" + d=" +M478.348419,743.347900 + C455.210907,766.641052 432.325043,789.685913 409.428772,812.720459 + C398.964447,823.247986 392.577515,823.682678 380.711761,815.029541 + C358.390045,798.751282 336.016266,782.544189 313.634674,766.348206 + C308.485413,762.622070 304.857025,758.026367 305.405609,751.358704 + C306.343109,739.964172 318.782501,734.122070 328.527679,740.756042 + C338.425537,747.493896 347.914215,754.833557 357.570435,761.925415 + C369.358521,770.583130 381.134491,779.257324 392.887909,787.903931 + C402.497681,778.461243 412.187042,769.147583 421.647522,759.606934 + C454.484741,726.491394 487.175385,693.229980 520.144531,660.246765 + C523.108032,657.281982 527.463562,654.944580 531.551514,654.052673 + C537.212158,652.817749 541.907532,655.862061 544.815735,660.940613 + C547.714111,666.002258 547.541199,671.199585 544.325562,676.045410 + C542.776978,678.379089 540.766357,680.441223 538.781982,682.445190 + C518.741638,702.683411 498.663422,722.884033 478.348419,743.347900 +z"/> +<path fill="#FA6874" opacity="1.000000" stroke="none" + d=" +M593.420898,547.380493 + C587.876953,532.894287 591.945801,520.028687 604.713928,511.268127 + C613.009094,505.576569 622.493408,502.910583 632.282715,501.611450 + C653.758911,498.761261 675.140747,498.679108 695.949158,505.874756 + C705.594299,509.210144 713.404175,515.040283 717.625061,524.607910 + C724.129761,539.352295 716.867798,556.312317 700.942017,564.045959 + C690.086609,569.317322 678.396240,570.794800 666.527588,571.451294 + C650.300415,572.348877 634.203430,571.600586 618.538757,566.947998 + C607.850586,563.773560 598.709778,558.279968 593.420898,547.380493 +z"/> +<path fill="#FA6874" opacity="1.000000" stroke="none" + d=" +M430.520630,521.645142 + C438.867523,538.172668 432.444458,555.846741 415.380096,564.060608 + C404.512909,569.291504 392.799683,570.704712 380.966400,571.480652 + C365.764771,572.477539 350.641968,571.840271 335.888275,567.858521 + C330.658661,566.447205 325.442627,564.265930 320.819763,561.451599 + C301.548828,549.719604 300.820587,525.188904 319.125580,511.965790 + C327.736176,505.745728 337.681488,503.097290 347.966248,501.604187 + C366.927155,498.851624 385.820618,499.216125 404.435089,504.045685 + C414.973907,506.780029 424.412872,511.494080 430.520630,521.645142 +z"/> +<path fill="#54E6DD" opacity="1.000000" stroke="none" + d=" +M683.619385,745.466919 + C700.328857,746.028748 707.980652,763.200256 699.725586,774.944824 + C695.674194,780.708801 690.032715,783.173584 683.002625,783.160950 + C646.186951,783.094604 609.371033,783.142639 572.555237,783.141907 + C557.395813,783.141663 542.236023,783.172302 527.076965,783.090088 + C514.631836,783.022522 505.949615,775.067200 506.035461,763.984863 + C506.119385,753.155151 514.636780,745.744324 527.290955,745.732788 + C574.934998,745.689270 622.578979,745.717346 670.223022,745.693970 + C674.549194,745.691833 678.875183,745.513611 683.619385,745.466919 +z"/> +<path fill="#2E2C2B" opacity="1.000000" stroke="none" + d=" +M573.774963,517.974915 + C579.713318,522.207764 581.639832,527.759460 580.340332,534.374939 + C575.193726,560.573547 558.985962,577.006897 534.178406,585.122131 + C505.757721,594.419189 473.917084,585.187134 456.439301,563.146667 + C449.907104,554.909119 445.820068,545.483887 444.109802,535.145996 + C441.973785,522.234802 451.910858,512.758362 463.056824,516.828613 + C468.217896,518.713257 471.571320,522.458679 472.075714,527.791504 + C474.801666,556.611938 513.555176,568.437317 537.482544,551.629333 + C545.466309,546.021118 550.224304,538.380920 552.040833,528.681213 + C554.096924,517.702332 563.290527,513.203308 573.774963,517.974915 +z"/> +<path fill="#2E2B2B" opacity="1.000000" stroke="none" + d=" +M339.727905,431.729614 + C366.645386,406.159454 407.427307,408.627106 428.760559,437.055054 + C431.594604,440.831604 433.785217,445.326324 435.282349,449.818817 + C437.887146,457.635101 434.161804,465.975098 427.099426,469.884247 + C420.260956,473.669586 412.669189,472.167053 406.737183,465.999939 + C401.674011,460.736115 396.940247,455.024902 391.265015,450.512360 + C383.656525,444.462585 378.804321,444.608063 371.034668,450.868103 + C365.369873,455.432312 360.625397,461.126282 355.360992,466.202850 + C348.371613,472.942932 338.238922,472.561127 331.880798,465.395721 + C327.625061,460.599701 326.267822,454.662567 328.746185,449.117493 + C331.469757,443.023926 335.828156,437.661072 339.727905,431.729614 +z"/> +<path fill="#2E2C2B" opacity="1.000000" stroke="none" + d=" +M627.881714,452.842285 + C623.856323,457.079926 620.080261,461.064819 616.356384,465.097839 + C609.730530,472.273621 602.081177,473.821533 595.025513,469.367218 + C587.804260,464.808380 584.819092,455.860718 588.567383,447.426849 + C595.618164,431.562134 608.181335,421.662506 624.522034,416.614532 + C649.069153,409.031464 676.143799,418.297729 689.778137,438.934937 + C692.195496,442.593872 694.083984,446.886444 695.058716,451.151093 + C696.739807,458.505768 692.859985,465.590668 686.240051,469.049805 + C679.697083,472.468719 672.520691,471.415222 666.995239,465.968567 + C662.849915,461.882324 659.164978,457.305450 654.848511,453.421021 + C644.515686,444.122406 639.186340,444.087555 627.881714,452.842285 +z"/> +<path fill="#F7A543" opacity="1.000000" stroke="none" + d=" +M755.767639,349.434631 + C756.118408,349.550903 756.520142,349.956268 756.965637,350.658020 + C756.612427,350.544189 756.215515,350.133972 755.767639,349.434631 +z"/> +<path fill="#F7A543" opacity="1.000000" stroke="none" + d=" +M754.728271,348.381989 + C754.928955,348.308350 755.267212,348.504425 755.744934,348.965271 + C755.544861,349.037262 755.205383,348.844452 754.728271,348.381989 +z"/> +<path fill="#F7A543" opacity="1.000000" stroke="none" + d=" +M757.097778,351.261414 + C757.283936,351.237732 757.526184,351.471436 757.857178,351.945251 + C757.682007,351.963135 757.417908,351.740967 757.097778,351.261414 +z"/> +<path fill="#F7A543" opacity="1.000000" stroke="none" + d=" +M752.991760,346.306854 + C753.187683,346.278656 753.458069,346.521759 753.822815,347.025085 + C753.633545,347.049652 753.349854,346.813904 752.991760,346.306854 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M835.979858,827.381470 + C836.178833,827.963501 836.348572,828.921509 836.192383,829.951416 + C835.894592,829.267944 835.922607,828.512756 835.979858,827.381470 +z"/> +<path fill="#F2BB78" opacity="1.000000" stroke="none" + d=" +M837.971436,818.370667 + C838.148560,818.952576 838.299622,819.897827 838.112549,820.875366 + C837.831360,820.183167 837.888306,819.458557 837.971436,818.370667 +z"/> +</svg>
\ No newline at end of file diff --git a/src/manifest/mstile-150x150.png b/src/manifest/mstile-150x150.png Binary files differnew file mode 100644 index 0000000..6fec85c --- /dev/null +++ b/src/manifest/mstile-150x150.png diff --git a/src/manifest/safari-pinned-tab.svg b/src/manifest/safari-pinned-tab.svg new file mode 100644 index 0000000..e4096f0 --- /dev/null +++ b/src/manifest/safari-pinned-tab.svg @@ -0,0 +1,81 @@ +<?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" + "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> +<svg version="1.0" xmlns="http://www.w3.org/2000/svg" + width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000" + preserveAspectRatio="xMidYMid meet"> +<metadata> +Created by potrace 1.14, written by Peter Selinger 2001-2017 +</metadata> +<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)" +fill="#000000" stroke="none"> +<path d="M4925 10226 c-11 -7 -24 -15 -30 -16 -5 -2 -18 -5 -27 -8 -10 -2 -18 +-7 -18 -11 0 -3 -13 -12 -30 -19 -40 -18 -160 -140 -185 -188 -11 -22 -24 -42 +-30 -46 -5 -4 -6 -8 -1 -8 5 0 4 -6 -1 -12 -8 -11 -22 -49 -27 -78 -1 -3 -5 +-11 -9 -17 -4 -7 -10 -50 -14 -95 -5 -83 9 -165 42 -246 8 -18 14 -35 14 -37 +0 -3 10 -15 21 -27 11 -12 20 -28 20 -35 0 -7 3 -13 8 -13 4 0 16 -14 27 -30 +11 -16 23 -30 27 -30 4 0 26 -19 49 -42 41 -41 42 -43 18 -45 -13 -1 -184 -4 +-379 -6 -331 -4 -386 -8 -450 -34 -8 -4 -18 -7 -22 -8 -5 -2 -9 -3 -10 -5 -2 +-1 -11 -3 -20 -5 -32 -6 -168 -77 -168 -88 0 -6 -3 -7 -6 -4 -4 3 -16 1 -27 +-5 -13 -7 -166 -11 -451 -13 -237 -1 -440 -5 -451 -7 -11 -3 -41 -9 -67 -12 +-26 -4 -50 -11 -53 -17 -4 -5 -10 -7 -15 -4 -6 4 -72 -12 -105 -25 -3 -1 -14 +-4 -25 -7 -11 -3 -20 -10 -20 -15 0 -5 -4 -7 -9 -4 -5 4 -30 -3 -55 -14 -26 +-11 -49 -19 -53 -19 -3 0 -9 -3 -12 -8 -3 -4 -31 -20 -61 -35 -70 -35 -93 -50 +-103 -65 -4 -7 -13 -13 -18 -13 -38 0 -261 -210 -330 -310 -13 -19 -27 -37 +-30 -40 -13 -11 -89 -145 -89 -157 0 -7 -4 -13 -10 -13 -5 0 -10 -6 -10 -14 0 +-8 -13 -43 -30 -78 -32 -71 -58 -164 -62 -225 -1 -13 -5 -23 -9 -23 -4 0 -6 +-15 -5 -34 1 -19 -2 -32 -6 -30 -11 7 -11 -1 -13 -773 0 -474 3 -703 10 -703 +7 0 7 -3 0 -8 -14 -10 -16 -112 -1 -112 7 0 7 -3 1 -8 -14 -10 -14 -105 -1 +-114 7 -5 7 -8 1 -8 -11 0 -13 -109 -2 -126 3 -6 4 -14 0 -17 -10 -11 -9 +-1086 1 -1080 5 4 6 0 1 -8 -13 -19 -12 -668 0 -673 7 -3 7 -5 0 -5 -11 -1 +-11 -113 -1 -130 4 -6 4 -11 -1 -11 -10 0 -8 -163 1 -179 4 -6 4 -11 -1 -11 +-9 0 -8 -154 2 -170 3 -5 3 -10 -2 -10 -4 0 -6 -81 -3 -181 3 -99 2 -189 -2 +-199 -4 -11 -4 -21 0 -24 8 -5 6 -80 -2 -102 -2 -6 -2 -15 1 -18 5 -5 5 -35 2 +-151 0 -5 1 -52 2 -103 1 -51 -1 -95 -4 -98 -3 -3 -2 -18 3 -32 4 -15 3 -37 +-1 -50 -5 -14 -5 -22 3 -22 7 0 7 -4 -1 -13 -6 -8 -9 -16 -6 -18 9 -9 12 -79 +3 -79 -5 0 -6 -5 -3 -10 4 -6 7 -101 7 -213 0 -135 4 -207 12 -216 8 -12 8 +-13 -2 -7 -10 6 -12 -2 -11 -33 2 -23 8 -41 13 -41 6 0 5 -4 -3 -9 -13 -8 -13 +-12 0 -27 8 -10 9 -15 2 -11 -8 5 -11 -4 -10 -33 1 -22 5 -40 10 -40 4 0 5 -5 +1 -12 -10 -15 -13 -68 -4 -68 3 0 6 -9 7 -20 1 -12 -3 -18 -9 -14 -6 4 -6 -1 +1 -14 6 -11 11 -37 11 -56 0 -20 3 -36 8 -36 4 0 8 -10 8 -22 1 -25 11 -91 15 +-95 1 -2 2 -6 3 -10 7 -37 51 -153 58 -153 4 0 8 -11 8 -25 0 -14 5 -25 10 +-25 6 0 10 -9 10 -20 0 -11 5 -20 10 -20 6 0 10 -7 10 -17 0 -9 11 -31 26 -50 +14 -18 21 -33 17 -33 -4 0 -3 -4 2 -8 6 -4 23 -26 39 -49 16 -24 50 -65 76 +-93 26 -27 45 -50 43 -50 -2 0 11 -15 29 -34 18 -18 36 -31 40 -29 5 2 8 -3 8 +-11 0 -9 5 -16 10 -16 6 0 22 -11 35 -25 14 -13 25 -22 25 -20 0 3 9 -3 19 +-12 38 -35 50 -43 65 -43 7 0 17 -7 20 -16 4 -9 9 -14 12 -11 4 3 13 -1 21 -9 +9 -8 22 -13 29 -10 8 3 11 0 7 -10 -3 -9 1 -14 13 -14 9 0 25 -7 34 -15 9 -8 +29 -16 43 -17 15 -1 27 -5 27 -8 0 -3 15 -11 33 -18 17 -8 41 -18 52 -23 11 +-6 30 -11 43 -12 12 0 22 -6 22 -11 0 -5 3 -7 6 -4 3 3 31 -1 62 -10 31 -8 68 +-16 82 -16 14 -1 32 -6 40 -12 22 -13 4543 -18 4635 -4 109 16 124 19 195 39 +104 29 180 59 192 76 4 5 8 7 8 2 0 -4 11 0 25 9 14 9 25 13 25 9 0 -4 7 -1 +16 6 17 14 49 34 74 45 19 9 147 102 178 129 58 50 112 108 112 117 0 6 3 9 6 +5 7 -7 60 54 56 65 -1 4 4 8 11 8 7 0 31 27 52 61 22 33 48 72 57 87 10 15 23 +39 29 55 6 15 15 27 20 27 4 0 6 7 3 15 -4 8 -1 15 5 15 6 0 11 6 11 13 0 6 6 +24 14 38 13 25 45 116 47 131 0 4 5 22 10 40 13 42 19 67 23 98 28 185 29 234 +22 2430 -11 3831 -10 3729 -33 3780 -3 8 -7 22 -8 30 -1 8 -5 22 -8 30 -4 8 +-8 26 -11 40 -2 14 -10 39 -16 55 -33 79 -44 104 -68 155 -36 76 -110 190 +-123 190 -6 0 -9 5 -7 11 5 14 -54 78 -65 72 -4 -3 -7 -1 -6 4 3 16 -1 36 -6 +31 -3 -3 -36 24 -73 58 -37 35 -71 64 -75 64 -5 0 -21 12 -36 28 -15 15 -41 +34 -57 42 -16 8 -38 23 -48 33 -11 9 -25 17 -32 17 -6 0 -17 7 -24 15 -7 8 +-16 12 -21 9 -5 -3 -9 0 -9 5 0 6 -9 11 -20 11 -11 0 -20 5 -20 10 0 6 -9 10 +-20 10 -11 0 -20 4 -20 8 0 9 -119 52 -144 52 -9 0 -16 4 -16 8 0 7 -24 12 +-67 15 -7 0 -13 3 -13 7 0 4 -6 7 -12 7 -7 1 -39 5 -70 10 -40 7 -61 7 -69 -1 +-9 -8 -10 -8 -5 2 5 8 0 12 -13 12 -12 0 -21 -6 -21 -12 0 -10 -2 -10 -9 0 -5 +9 -31 13 -77 13 -38 0 -181 2 -319 5 -236 5 -252 7 -285 28 -59 38 -205 100 +-230 99 -3 0 -16 3 -29 8 -69 27 -260 34 -788 29 -100 -1 -187 1 -193 5 -11 7 +11 35 27 35 15 0 143 141 137 151 -3 5 -1 9 4 9 11 0 52 81 52 103 0 9 5 19 +11 22 6 4 8 13 5 20 -2 7 -2 16 2 19 16 16 24 183 10 202 -5 7 -8 16 -7 20 1 +5 0 12 -1 17 -3 9 -4 13 -15 52 -15 58 -107 200 -138 213 -4 2 -22 17 -40 33 +-17 16 -37 29 -44 29 -7 0 -13 4 -13 8 0 5 -10 13 -22 19 -13 6 -36 17 -53 24 +-16 8 -36 20 -43 27 -20 18 -330 17 -357 -2z m245 -329 c34 -7 60 -19 60 -27 +0 -5 9 -12 21 -15 11 -4 18 -9 15 -12 -3 -3 0 -11 7 -19 32 -35 37 -45 39 -69 +1 -14 5 -25 8 -25 3 0 5 -13 5 -30 1 -16 -2 -30 -6 -30 -4 0 -6 -11 -4 -25 1 +-14 -1 -25 -6 -25 -4 0 -10 -8 -14 -19 -6 -21 -55 -77 -55 -64 0 4 -4 3 -8 -3 +-12 -19 -70 -44 -102 -44 -22 0 -29 -4 -24 -12 6 -10 5 -10 -8 -1 -8 7 -27 14 +-42 15 -14 1 -26 6 -26 10 0 4 -6 8 -13 8 -7 0 -23 9 -34 19 -12 11 -24 17 +-27 14 -3 -4 -6 1 -6 10 0 10 -4 17 -9 17 -26 0 -60 164 -38 181 4 3 10 16 12 +30 3 13 9 25 15 27 6 2 9 7 7 10 -2 4 10 19 25 34 15 15 28 24 28 21 0 -3 7 0 +16 8 25 21 103 28 164 16z"/> +</g> +</svg> diff --git a/src/manifest/site.webmanifest b/src/manifest/site.webmanifest new file mode 100644 index 0000000..ada3b78 --- /dev/null +++ b/src/manifest/site.webmanifest @@ -0,0 +1,24 @@ +{ + "name": "Donetick: Simplify Tasks & Chores, Together.", + "short_name": "Donetick", + "description": "An open-source, user-friendly app for managing tasks and chores, featuring customizable options to help you and others stay organized", + "start_url": "/index.html", + "scope": "/", + "lang": "en", + + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/src/service/AuthenticationService.jsx b/src/service/AuthenticationService.jsx new file mode 100644 index 0000000..924de11 --- /dev/null +++ b/src/service/AuthenticationService.jsx @@ -0,0 +1,18 @@ +import React, { createContext, useState } from 'react' + +const AuthenticationContext = createContext({}) + +const AuthenticationProvider = ({ children }) => { + const [isLoggedIn, setIsLoggedIn] = useState(false) + const [userProfile, setUserProfile] = useState({}) + return ( + <AuthenticationContext.Provider + value={{ isLoggedIn, setIsLoggedIn, userProfile, setUserProfile }} + > + {children} + </AuthenticationContext.Provider> + ) +} +export { AuthenticationContext, AuthenticationProvider } + +// export default AuthenticationProvider; diff --git a/src/utils/Fetcher.jsx b/src/utils/Fetcher.jsx new file mode 100644 index 0000000..6444b34 --- /dev/null +++ b/src/utils/Fetcher.jsx @@ -0,0 +1,250 @@ +import { API_URL } from '../Config' +import { Fetch, HEADERS } from './TokenManager' + +const createChore = userID => { + return Fetch(`${API_URL}/chores/`, { + method: 'POST', + headers: HEADERS(), + body: JSON.stringify({ + createdBy: Number(userID), + }), + }).then(response => response.json()) +} + +const signUp = (username, password, displayName, email) => { + return fetch(`${API_URL}/auth/`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ username, password, displayName, email }), + }) +} + +const login = (username, password) => { + return fetch(`${API_URL}/auth/login`, { + headers: { + 'Content-Type': 'application/json', + }, + method: 'POST', + body: JSON.stringify({ username, password }), + }) +} + +const GetAllUsers = () => { + return fetch(`${API_URL}/users/`, { + method: 'GET', + headers: HEADERS(), + }) +} + +const GetChores = () => { + return Fetch(`${API_URL}/chores/`, { + method: 'GET', + headers: HEADERS(), + }) +} + +const GetChoreByID = id => { + return Fetch(`${API_URL}/chores/${id}`, { + method: 'GET', + headers: HEADERS(), + }) +} +const CreateChore = chore => { + return Fetch(`${API_URL}/chores/`, { + method: 'POST', + headers: HEADERS(), + body: JSON.stringify(chore), + }) +} + +const DeleteChore = id => { + return Fetch(`${API_URL}/chores/${id}`, { + method: 'DELETE', + headers: HEADERS(), + }) +} + +const SaveChore = chore => { + console.log('chore', chore) + return Fetch(`${API_URL}/chores/`, { + method: 'PUT', + headers: HEADERS(), + body: JSON.stringify(chore), + }) +} +const GetChoreHistory = choreId => { + return Fetch(`${API_URL}/chores/${choreId}/history`, { + method: 'GET', + headers: HEADERS(), + }) +} + +const GetAllCircleMembers = () => { + return Fetch(`${API_URL}/circles/members`, { + method: 'GET', + headers: HEADERS(), + }) +} + +const GetUserProfile = () => { + return Fetch(`${API_URL}/users/profile`, { + method: 'GET', + headers: HEADERS(), + }) +} + +const GetUserCircle = () => { + return Fetch(`${API_URL}/circles/`, { + method: 'GET', + headers: HEADERS(), + }) +} + +const JoinCircle = inviteCode => { + return Fetch(`${API_URL}/circles/join?invite_code=${inviteCode}`, { + method: 'POST', + headers: HEADERS(), + }) +} + +const GetCircleMemberRequests = () => { + return Fetch(`${API_URL}/circles/members/requests`, { + method: 'GET', + headers: HEADERS(), + }) +} + +const AcceptCircleMemberRequest = id => { + return Fetch(`${API_URL}/circles/members/requests/accept?requestId=${id}`, { + method: 'PUT', + headers: HEADERS(), + }) +} + +const LeaveCircle = id => { + return Fetch(`${API_URL}/circles/leave?circle_id=${id}`, { + method: 'DELETE', + headers: HEADERS(), + }) +} + +const DeleteCircleMember = (circleID, memberID) => { + return Fetch( + `${API_URL}/circles/${circleID}/members/delete?member_id=${memberID}`, + { + method: 'DELETE', + headers: HEADERS(), + }, + ) +} + +const UpdateUserDetails = userDetails => { + return Fetch(`${API_URL}/users`, { + method: 'PUT', + headers: HEADERS(), + body: JSON.stringify(userDetails), + }) +} + +const GetSubscriptionSession = () => { + return Fetch(API_URL + `/payments/create-subscription`, { + method: 'GET', + headers: HEADERS(), + }) +} + +const CancelSubscription = () => { + return Fetch(API_URL + `/payments/cancel-subscription`, { + method: 'POST', + headers: HEADERS(), + }) +} + +const GetThings = () => { + return Fetch(`${API_URL}/things`, { + method: 'GET', + headers: HEADERS(), + }) +} +const CreateThing = thing => { + return Fetch(`${API_URL}/things`, { + method: 'POST', + headers: HEADERS(), + body: JSON.stringify(thing), + }) +} + +const SaveThing = thing => { + return Fetch(`${API_URL}/things`, { + method: 'PUT', + headers: HEADERS(), + body: JSON.stringify(thing), + }) +} + +const UpdateThingState = thing => { + return Fetch(`${API_URL}/things/${thing.id}/state?value=${thing.state}`, { + method: 'PUT', + headers: HEADERS(), + }) +} +const DeleteThing = id => { + return Fetch(`${API_URL}/things/${id}`, { + method: 'DELETE', + headers: HEADERS(), + }) +} + +const CreateLongLiveToken = name => { + return Fetch(`${API_URL}/users/tokens`, { + method: 'POST', + headers: HEADERS(), + body: JSON.stringify({ name }), + }) +} +const DeleteLongLiveToken = id => { + return Fetch(`${API_URL}/users/tokens/${id}`, { + method: 'DELETE', + headers: HEADERS(), + }) +} + +const GetLongLiveTokens = () => { + return Fetch(`${API_URL}/users/tokens`, { + method: 'GET', + headers: HEADERS(), + }) +} +export { + AcceptCircleMemberRequest, + CancelSubscription, + createChore, + CreateChore, + CreateLongLiveToken, + CreateThing, + DeleteChore, + DeleteCircleMember, + DeleteLongLiveToken, + DeleteThing, + GetAllCircleMembers, + GetAllUsers, + GetChoreByID, + GetChoreHistory, + GetChores, + GetCircleMemberRequests, + GetLongLiveTokens, + GetSubscriptionSession, + GetThings, + GetUserCircle, + GetUserProfile, + JoinCircle, + LeaveCircle, + login, + SaveChore, + SaveThing, + signUp, + UpdateThingState, + UpdateUserDetails, +} diff --git a/src/utils/Helpers.jsx b/src/utils/Helpers.jsx new file mode 100644 index 0000000..17c0351 --- /dev/null +++ b/src/utils/Helpers.jsx @@ -0,0 +1,7 @@ +import moment from 'moment' + +const isPlusAccount = userProfile => { + return userProfile?.expiration && moment(userProfile?.expiration).isAfter() +} + +export { isPlusAccount } diff --git a/src/utils/TokenManager.jsx b/src/utils/TokenManager.jsx new file mode 100644 index 0000000..35472e4 --- /dev/null +++ b/src/utils/TokenManager.jsx @@ -0,0 +1,65 @@ +import Cookies from 'js-cookie' +import { API_URL } from '../Config' +export function Fetch(url, options) { + if (!isTokenValid()) { + console.log('FETCH: Token is not valid') + console.log(localStorage.getItem('ca_token')) + // store current location in cookie + Cookies.set('ca_redirect', window.location.pathname) + // Assuming you have a function isTokenValid() that checks token validity + window.location.href = '/login' // Redirect to login page + // return Promise.reject("Token is not valid"); + } + if (!options) { + options = {} + } + options.headers = { ...options.headers, ...HEADERS() } + + return fetch(url, options) +} + +export const HEADERS = () => { + return { + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + localStorage.getItem('ca_token'), + } +} + +export const isTokenValid = () => { + const expiration = localStorage.getItem('ca_expiration') + const token = localStorage.getItem('ca_token') + + if (localStorage.getItem('ca_token')) { + const now = new Date() + const expire = new Date(expiration) + if (now < expire) { + if (now.getTime() + 24 * 60 * 60 * 1000 > expire.getTime()) { + refreshAccessToken() + } + + return true + } else { + localStorage.removeItem('ca_token') + localStorage.removeItem('ca_expiration') + } + return false + } +} + +export const refreshAccessToken = () => { + fetch(API_URL + '/auth/refresh', { + method: 'GET', + headers: HEADERS(), + }).then(res => { + if (res.status === 200) { + res.json().then(data => { + localStorage.setItem('ca_token', data.token) + localStorage.setItem('ca_expiration', data.expire) + }) + } else { + return res.json().then(error => { + console.log(error) + }) + } + }) +} diff --git a/src/views/Authorization/AuthorizationContainer.jsx b/src/views/Authorization/AuthorizationContainer.jsx new file mode 100644 index 0000000..3bfc622 --- /dev/null +++ b/src/views/Authorization/AuthorizationContainer.jsx @@ -0,0 +1,45 @@ +// import Logo from 'Components/Logo' +import { Box, Paper } from '@mui/material' +import { styled } from '@mui/material/styles' + +const Container = styled('div')(({ theme }) => ({ + minHeight: '100vh', + padding: '24px', + display: 'grid', + placeItems: 'start center', + [theme.breakpoints.up('sm')]: { + // center children + placeItems: 'center', + }, +})) + +const AuthCard = styled(Paper)(({ theme }) => ({ + // border: "1px solid #c4c4c4", + padding: 24, + paddingTop: 32, + borderRadius: 24, + width: '100%', + maxWidth: '400px', + [theme.breakpoints.down('sm')]: { + maxWidth: 'unset', + }, +})) + +export default function AuthCardContainer({ children, ...props }) { + return ( + <Container> + <AuthCard elevation={0}> + <Box + sx={{ + display: 'grid', + placeItems: 'center', + paddingBottom: 4, + }} + > + {/* <Logo size='96px' /> */} + </Box> + {children} + </AuthCard> + </Container> + ) +} diff --git a/src/views/Authorization/ForgotPasswordView.jsx b/src/views/Authorization/ForgotPasswordView.jsx new file mode 100644 index 0000000..44601eb --- /dev/null +++ b/src/views/Authorization/ForgotPasswordView.jsx @@ -0,0 +1,227 @@ +// create boilerplate for ResetPasswordView: +import { + Box, + Button, + Container, + FormControl, + FormHelperText, + Input, + Sheet, + Snackbar, + Typography, +} from '@mui/joy' +import { useState } from 'react' +import { useNavigate } from 'react-router-dom' + +import { API_URL } from './../../Config' + +const ForgotPasswordView = () => { + const navigate = useNavigate() + // const [showLoginSnackbar, setShowLoginSnackbar] = useState(false) + // const [snackbarMessage, setSnackbarMessage] = useState('') + const [resetStatusOk, setResetStatusOk] = useState(null) + const [email, setEmail] = useState('') + const [emailError, setEmailError] = useState(null) + + const validateEmail = email => { + return !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email) + } + + const handleSubmit = async () => { + if (!email) { + return setEmailError('Email is required') + } + + // validate email: + if (validateEmail(email)) { + setEmailError('Please enter a valid email address') + return + } + + if (emailError) { + return + } + + try { + const response = await fetch(`${API_URL}/auth/reset`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ email: email }), + }) + + if (response.ok) { + setResetStatusOk(true) + // wait 3 seconds and then redirect to login: + } else { + setResetStatusOk(false) + } + } catch (error) { + setResetStatusOk(false) + } + } + + const handleEmailChange = e => { + setEmail(e.target.value) + if (validateEmail(e.target.value)) { + setEmailError('Please enter a valid email address') + } else { + setEmailError(null) + } + } + + return ( + <Container + component='main' + maxWidth='xs' + + // make content center in the middle of the page: + > + <Box + sx={{ + marginTop: 4, + display: 'flex', + flexDirection: 'column', + + justifyContent: 'space-between', + alignItems: 'center', + }} + > + <Sheet + component='form' + sx={{ + mt: 1, + width: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: 2, + borderRadius: '8px', + boxShadow: 'md', + minHeight: '70vh', + justifyContent: 'space-between', + justifyItems: 'center', + }} + > + <Box> + <img + src='/src/assets/logo.svg' + alt='logo' + width='128px' + height='128px' + /> + {/* <Logo /> */} + <Typography level='h2'> + Done + <span + style={{ + color: '#06b6d4', + }} + > + tick + </span> + </Typography> + </Box> + {/* HERE */} + <Box sx={{ textAlign: 'center' }}></Box> + {resetStatusOk === null && ( + <form onSubmit={handleSubmit}> + <div className='grid gap-6'> + <Typography level='body2' gutterBottom> + Enter your email, and we'll send you a link to get into your + account. + </Typography> + <FormControl error={emailError !== null}> + <Input + placeholder='Email' + type='email' + variant='soft' + fullWidth + size='lg' + value={email} + onChange={handleEmailChange} + error={emailError !== null} + onKeyDown={e => { + if (e.key === 'Enter') { + e.preventDefault() + handleSubmit() + } + }} + /> + <FormHelperText>{emailError}</FormHelperText> + </FormControl> + <Box> + <Button + variant='solid' + size='lg' + fullWidth + sx={{ + mb: 1, + }} + onClick={handleSubmit} + > + Reset Password + </Button> + <Button + fullWidth + size='lg' + variant='soft' + sx={{ + width: '100%', + border: 'moccasin', + borderRadius: '8px', + }} + onClick={() => { + navigate('/login') + }} + color='neutral' + > + Back to Login + </Button> + </Box> + </div> + </form> + )} + {resetStatusOk != null && ( + <> + <Box mt={-30}> + <Typography level='body-md'> + if there is an account associated with the email you entered, + you will receive an email with instructions on how to reset + your + </Typography> + </Box> + <Button + variant='soft' + size='lg' + sx={{ position: 'relative', bottom: '0' }} + onClick={() => { + navigate('/login') + }} + fullWidth + > + Go to Login + </Button> + </> + )} + <Snackbar + open={resetStatusOk ? resetStatusOk : resetStatusOk === false} + autoHideDuration={5000} + onClose={() => { + if (resetStatusOk) { + navigate('/login') + } + }} + > + {resetStatusOk + ? 'Reset email sent, check your email' + : 'Reset email failed, try again later'} + </Snackbar> + </Sheet> + </Box> + </Container> + ) +} + +export default ForgotPasswordView diff --git a/src/views/Authorization/LoginView.jsx b/src/views/Authorization/LoginView.jsx new file mode 100644 index 0000000..2ffcef4 --- /dev/null +++ b/src/views/Authorization/LoginView.jsx @@ -0,0 +1,345 @@ +import GoogleIcon from '@mui/icons-material/Google' +import { + Avatar, + Box, + Button, + Container, + Divider, + Input, + Sheet, + Snackbar, + Typography, +} from '@mui/joy' +import Cookies from 'js-cookie' +import React from 'react' +import { useNavigate } from 'react-router-dom' +import { LoginSocialGoogle } from 'reactjs-social-login' +import { API_URL, GOOGLE_CLIENT_ID, REDIRECT_URL } from '../../Config' +import { UserContext } from '../../contexts/UserContext' +import Logo from '../../Logo' +import { GetUserProfile } from '../../utils/Fetcher' +const LoginView = () => { + const { userProfile, setUserProfile } = React.useContext(UserContext) + const [username, setUsername] = React.useState('') + const [password, setPassword] = React.useState('') + const [error, setError] = React.useState(null) + const Navigate = useNavigate() + const handleSubmit = async e => { + e.preventDefault() + + fetch(`${API_URL}/auth/login`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ username, password }), + }) + .then(response => { + if (response.status === 200) { + return response.json().then(data => { + localStorage.setItem('ca_token', data.token) + localStorage.setItem('ca_expiration', data.expire) + const redirectUrl = Cookies.get('ca_redirect') + // console.log('redirectUrl', redirectUrl) + if (redirectUrl) { + Cookies.remove('ca_redirect') + Navigate(redirectUrl) + } else { + Navigate('/my/chores') + } + }) + } else if (response.status === 401) { + setError('Wrong username or password') + } else { + setError('An error occurred, please try again') + console.log('Login failed') + } + }) + .catch(err => { + setError('Unable to communicate with server, please try again') + console.log('Login failed', err) + }) + } + + const loggedWithProvider = function (provider, data) { + console.log(provider, data) + return fetch(API_URL + `/auth/${provider}/callback`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + provider: provider, + token: + data['access_token'] || // data["access_token"] is for Google + data['accessToken'], // data["accessToken"] is for Facebook + data: data, + }), + }).then(response => { + if (response.status === 200) { + return response.json().then(data => { + localStorage.setItem('ca_token', data.token) + localStorage.setItem('ca_expiration', data.expire) + // setIsLoggedIn(true); + getUserProfileAndNavigateToHome() + }) + } + return response.json().then(error => { + setError("Couldn't log in with Google, please try again") + }) + }) + } + const getUserProfileAndNavigateToHome = () => { + GetUserProfile().then(data => { + data.json().then(data => { + setUserProfile(data.res) + // check if redirect url is set in cookie: + const redirectUrl = Cookies.get('ca_redirect') + if (redirectUrl) { + Cookies.remove('ca_redirect') + Navigate(redirectUrl) + } else { + Navigate('/my/chores') + } + }) + }) + } + const handleForgotPassword = () => { + Navigate('/forgot-password') + } + return ( + <Container + component='main' + maxWidth='xs' + + // make content center in the middle of the page: + > + <Box + sx={{ + marginTop: 4, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }} + > + <Sheet + component='form' + sx={{ + mt: 1, + width: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: 2, + borderRadius: '8px', + boxShadow: 'md', + }} + > + {/* <img + src='/src/assets/logo.svg' + alt='logo' + width='128px' + height='128px' + /> */} + <Logo /> + + <Typography level='h2'> + Done + <span + style={{ + color: '#06b6d4', + }} + > + tick + </span> + </Typography> + + {userProfile && ( + <> + <Avatar + src={userProfile?.image} + alt={userProfile?.username} + size='lg' + sx={{ + mt: 2, + width: '96px', + height: '96px', + mb: 1, + }} + /> + <Typography level='body-md' alignSelf={'center'}> + Welcome back,{' '} + {userProfile?.displayName || userProfile?.username} + </Typography> + + <Button + fullWidth + size='lg' + sx={{ mt: 3, mb: 2 }} + onClick={() => { + getUserProfileAndNavigateToHome() + }} + > + Continue as {userProfile.displayName || userProfile.username} + </Button> + <Button + type='submit' + fullWidth + size='lg' + q + variant='plain' + sx={{ + width: '100%', + mb: 2, + border: 'moccasin', + borderRadius: '8px', + }} + onClick={() => { + setUserProfile(null) + localStorage.removeItem('ca_token') + localStorage.removeItem('ca_expiration') + // go to login page: + window.location.href = '/login' + }} + > + Logout + </Button> + </> + )} + {!userProfile && ( + <> + <Typography level='body2'> + Sign in to your account to continue + </Typography> + <Typography level='body2' alignSelf={'start'} mt={4}> + Username + </Typography> + <Input + margin='normal' + required + fullWidth + id='email' + label='Email Address' + name='email' + autoComplete='email' + autoFocus + value={username} + onChange={e => { + setUsername(e.target.value) + }} + /> + <Typography level='body2' alignSelf={'start'}> + Password: + </Typography> + <Input + margin='normal' + required + fullWidth + name='password' + label='Password' + type='password' + id='password' + value={password} + onChange={e => { + setPassword(e.target.value) + }} + /> + + <Button + type='submit' + fullWidth + size='lg' + variant='solid' + sx={{ + width: '100%', + mt: 3, + mb: 2, + border: 'moccasin', + borderRadius: '8px', + }} + onClick={handleSubmit} + > + Sign In + </Button> + <Button + type='submit' + fullWidth + size='lg' + q + variant='plain' + sx={{ + width: '100%', + mb: 2, + border: 'moccasin', + borderRadius: '8px', + }} + onClick={handleForgotPassword} + > + Forgot password? + </Button> + </> + )} + <Divider> or </Divider> + + <Box sx={{ width: '100%' }}> + <LoginSocialGoogle + client_id={GOOGLE_CLIENT_ID} + redirect_uri={REDIRECT_URL} + scope='openid profile email' + discoveryDocs='claims_supported' + access_type='online' + isOnlyGetToken={true} + onResolve={({ provider, data }) => { + loggedWithProvider(provider, data) + }} + onReject={err => { + setError("Couldn't log in with Google, please try again") + }} + > + <Button + variant='soft' + color='neutral' + size='lg' + fullWidth + sx={{ + width: '100%', + mt: 1, + mb: 1, + border: 'moccasin', + borderRadius: '8px', + }} + > + <div className='flex gap-2'> + <GoogleIcon /> + Continue with Google + </div> + </Button> + </LoginSocialGoogle> + </Box> + + <Button + onClick={() => { + Navigate('/signup') + }} + fullWidth + variant='soft' + size='lg' + // sx={{ mt: 3, mb: 2 }} + > + Create new account + </Button> + </Sheet> + </Box> + <Snackbar + open={error !== null} + onClose={() => setError(null)} + autoHideDuration={3000} + message={error} + > + {error} + </Snackbar> + </Container> + ) +} + +export default LoginView diff --git a/src/views/Authorization/Signup.jsx b/src/views/Authorization/Signup.jsx new file mode 100644 index 0000000..d83411f --- /dev/null +++ b/src/views/Authorization/Signup.jsx @@ -0,0 +1,243 @@ +import { + Box, + Button, + Container, + Divider, + FormControl, + FormHelperText, + Input, + Sheet, + Typography, +} from '@mui/joy' +import React from 'react' +import { useNavigate } from 'react-router-dom' +import Logo from '../../Logo' +import { login, signUp } from '../../utils/Fetcher' + +const SignupView = () => { + const [username, setUsername] = React.useState('') + const [password, setPassword] = React.useState('') + const Navigate = useNavigate() + const [displayName, setDisplayName] = React.useState('') + const [email, setEmail] = React.useState('') + const [usernameError, setUsernameError] = React.useState('') + const [passwordError, setPasswordError] = React.useState('') + const [emailError, setEmailError] = React.useState('') + const [displayNameError, setDisplayNameError] = React.useState('') + const [error, setError] = React.useState(null) + const handleLogin = (username, password) => { + login(username, password).then(response => { + if (response.status === 200) { + response.json().then(res => { + localStorage.setItem('ca_token', res.token) + localStorage.setItem('ca_expiration', res.expire) + setTimeout(() => { + // TODO: not sure if there is a race condition here + // but on first sign up it renavigates to login. + Navigate('/my/chores') + }, 500) + }) + } else { + console.log('Login failed', response) + // Navigate('/login') + } + }) + } + const handleSignUpValidation = () => { + // Reset errors before validation + setUsernameError(null) + setPasswordError(null) + setDisplayNameError(null) + setEmailError(null) + + let isValid = true + + if (!username.trim()) { + setUsernameError('Username is required') + isValid = false + } + if (username.length < 4) { + setUsernameError('Username must be at least 4 characters') + isValid = false + } + // if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { + // setEmailError('Invalid email address') + // isValid = false + // } + + if (password.length < 8) { + setPasswordError('Password must be at least 8 characters') + isValid = false + } + + if (!displayName.trim()) { + setDisplayNameError('Display name is required') + isValid = false + } + + // display name should only contain letters and spaces and numbers: + if (!/^[a-zA-Z0-9 ]+$/.test(displayName)) { + setDisplayNameError('Display name can only contain letters and numbers') + isValid = false + } + + // username should only contain letters , numbers , dot and dash: + if (!/^[a-zA-Z0-9.-]+$/.test(username)) { + setUsernameError( + 'Username can only contain letters, numbers, dot and dash', + ) + isValid = false + } + + return isValid + } + const handleSubmit = async e => { + e.preventDefault() + if (!handleSignUpValidation()) { + return + } + signUp(username, password, displayName, email).then(response => { + if (response.status === 201) { + handleLogin(username, password) + } else { + console.log('Signup failed') + setError('Signup failed') + } + }) + } + + return ( + <Container component='main' maxWidth='xs'> + <Box + sx={{ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + marginTop: 4, + }} + > + <Sheet + component='form' + sx={{ + mt: 1, + width: '100%', + display: 'flex', + flexDirection: 'column', + // alignItems: 'center', + padding: 2, + borderRadius: '8px', + boxShadow: 'md', + }} + > + <Box + sx={{ + display: 'flex', + alignItems: 'center', + flexDirection: 'column', + }} + > + <Logo /> + <Typography level='h2'> + Done + <span + style={{ + color: '#06b6d4', + }} + > + tick + </span> + </Typography> + <Typography level='body2'> + Create an account to get started! + </Typography> + </Box> + <Typography level='body2' alignSelf={'start'} mt={4}> + Username + </Typography> + <Input + margin='normal' + required + fullWidth + id='email' + label='Email Address' + name='email' + autoComplete='email' + autoFocus + value={username} + onChange={e => { + setUsernameError(null) + setUsername(e.target.value.trim()) + }} + /> + <FormControl error={usernameError}> + <FormHelperText c>{usernameError}</FormHelperText> + </FormControl> + {/* Error message display */} + <Typography level='body2' alignSelf={'start'}> + Password: + </Typography> + <Input + margin='normal' + required + fullWidth + name='password' + label='Password' + type='password' + id='password' + value={password} + onChange={e => { + setPasswordError(null) + setPassword(e.target.value) + }} + /> + <FormControl error={passwordError}> + <FormHelperText>{passwordError}</FormHelperText> + </FormControl> + <Typography level='body2' alignSelf={'start'}> + Display Name: + </Typography> + <Input + margin='normal' + required + fullWidth + name='displayName' + label='Display Name' + id='displayName' + value={displayName} + onChange={e => { + setDisplayNameError(null) + setDisplayName(e.target.value) + }} + /> + <FormControl error={displayNameError}> + <FormHelperText>{displayNameError}</FormHelperText> + </FormControl> + <Button + // type='submit' + size='lg' + fullWidth + variant='solid' + sx={{ mt: 3, mb: 1 }} + onClick={handleSubmit} + > + Sign Up + </Button> + <Divider> or </Divider> + <Button + size='lg' + onClick={() => { + Navigate('/login') + }} + fullWidth + variant='soft' + // sx={{ mt: 3, mb: 2 }} + > + Login + </Button> + </Sheet> + </Box> + </Container> + ) +} + +export default SignupView diff --git a/src/views/Authorization/UpdatePasswordView.jsx b/src/views/Authorization/UpdatePasswordView.jsx new file mode 100644 index 0000000..7177f2f --- /dev/null +++ b/src/views/Authorization/UpdatePasswordView.jsx @@ -0,0 +1,194 @@ +// create boilerplate for ResetPasswordView: +import { + Box, + Button, + Container, + FormControl, + FormHelperText, + Input, + Sheet, + Snackbar, + Typography, +} from '@mui/joy' +import { useState } from 'react' +import { useNavigate, useSearchParams } from 'react-router-dom' + +import { API_URL } from '../../Config' +import Logo from '../../Logo' + +const UpdatePasswordView = () => { + const navigate = useNavigate() + const [password, setPassword] = useState('') + const [passwordConfirm, setPasswordConfirm] = useState('') + const [passwordError, setPasswordError] = useState(null) + const [passworConfirmationError, setPasswordConfirmationError] = + useState(null) + const [searchParams] = useSearchParams() + + const [updateStatusOk, setUpdateStatusOk] = useState(null) + + const verifiticationCode = searchParams.get('c') + + const handlePasswordChange = e => { + const password = e.target.value + setPassword(password) + if (password.length < 8) { + setPasswordError('Password must be at least 8 characters') + } else { + setPasswordError(null) + } + } + const handlePasswordConfirmChange = e => { + setPasswordConfirm(e.target.value) + if (e.target.value !== password) { + setPasswordConfirmationError('Passwords do not match') + } else { + setPasswordConfirmationError(null) + } + } + + const handleSubmit = async () => { + if (passwordError != null || passworConfirmationError != null) { + return + } + try { + const response = await fetch( + `${API_URL}/auth/password?c=${verifiticationCode}`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ password: password }), + }, + ) + + if (response.ok) { + setUpdateStatusOk(true) + // wait 3 seconds and then redirect to login: + setTimeout(() => { + navigate('/login') + }, 3000) + } else { + setUpdateStatusOk(false) + } + } catch (error) { + setUpdateStatusOk(false) + } + } + return ( + <Container component='main' maxWidth='xs'> + <Box + sx={{ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + marginTop: 4, + }} + > + <Sheet + component='form' + sx={{ + mt: 1, + width: '100%', + display: 'flex', + flexDirection: 'column', + // alignItems: 'center', + padding: 2, + borderRadius: '8px', + boxShadow: 'md', + }} + > + <Box + sx={{ + display: 'flex', + alignItems: 'center', + flexDirection: 'column', + }} + > + <Logo /> + <Typography level='h2'> + Done + <span + style={{ + color: '#06b6d4', + }} + > + tick + </span> + </Typography> + <Typography level='body2' mb={4}> + Please enter your new password below + </Typography> + </Box> + + <FormControl error> + <Input + placeholder='Password' + type='password' + value={password} + onChange={handlePasswordChange} + error={passwordError !== null} + // onKeyDown={e => { + // if (e.key === 'Enter' && validateForm(validateFormInput)) { + // handleSubmit(e) + // } + // }} + /> + <FormHelperText>{passwordError}</FormHelperText> + </FormControl> + + <FormControl error> + <Input + placeholder='Confirm Password' + type='password' + value={passwordConfirm} + onChange={handlePasswordConfirmChange} + error={passworConfirmationError !== null} + // onKeyDown={e => { + // if (e.key === 'Enter' && validateForm(validateFormInput)) { + // handleSubmit(e) + // } + // }} + /> + <FormHelperText>{passworConfirmationError}</FormHelperText> + </FormControl> + {/* helper to show password not matching : */} + + <Button + fullWidth + size='lg' + sx={{ + mt: 5, + mb: 1, + }} + onClick={handleSubmit} + > + Save Password + </Button> + <Button + fullWidth + size='lg' + variant='soft' + onClick={() => { + navigate('/login') + }} + > + Cancel + </Button> + </Sheet> + </Box> + <Snackbar + open={updateStatusOk !== true} + autoHideDuration={6000} + onClose={() => { + setUpdateStatusOk(null) + }} + > + Password update failed, try again later + </Snackbar> + </Container> + ) +} + +export default UpdatePasswordView diff --git a/src/views/ChoreEdit/ChoreEdit.jsx b/src/views/ChoreEdit/ChoreEdit.jsx new file mode 100644 index 0000000..e8eb17d --- /dev/null +++ b/src/views/ChoreEdit/ChoreEdit.jsx @@ -0,0 +1,744 @@ +import { + Box, + Button, + Card, + Checkbox, + Chip, + Container, + Divider, + FormControl, + FormHelperText, + Input, + List, + ListItem, + Option, + Radio, + RadioGroup, + Select, + Sheet, + Typography, +} from '@mui/joy' +import moment from 'moment' +import { useContext, useEffect, useState } from 'react' +import { useNavigate, useParams } from 'react-router-dom' +import { UserContext } from '../../contexts/UserContext' +import { + CreateChore, + DeleteChore, + GetAllCircleMembers, + GetChoreByID, + GetChoreHistory, + GetThings, + SaveChore, +} from '../../utils/Fetcher' +import { isPlusAccount } from '../../utils/Helpers' +import FreeSoloCreateOption from '../components/AutocompleteSelect' +import ConfirmationModal from '../Modals/Inputs/ConfirmationModal' +import RepeatSection from './RepeatSection' +const ASSIGN_STRATEGIES = [ + 'random', + 'least_assigned', + 'least_completed', + 'keep_last_assigned', +] +const REPEAT_ON_TYPE = ['interval', 'days_of_the_week', 'day_of_the_month'] + +const NO_DUE_DATE_REQUIRED_TYPE = ['no_repeat', 'once'] +const NO_DUE_DATE_ALLOWED_TYPE = ['trigger'] +const ChoreEdit = () => { + const { userProfile, setUserProfile } = useContext(UserContext) + const [chore, setChore] = useState([]) + const [choresHistory, setChoresHistory] = useState([]) + const [userHistory, setUserHistory] = useState({}) + const { choreId } = useParams() + const [name, setName] = useState('') + const [confirmModelConfig, setConfirmModelConfig] = useState({}) + const [assignees, setAssignees] = useState([]) + const [performers, setPerformers] = useState([]) + const [assignStrategy, setAssignStrategy] = useState(ASSIGN_STRATEGIES[2]) + const [dueDate, setDueDate] = useState(null) + const [completed, setCompleted] = useState(false) + const [completedDate, setCompletedDate] = useState('') + const [assignedTo, setAssignedTo] = useState(-1) + const [frequencyType, setFrequencyType] = useState('once') + const [frequency, setFrequency] = useState(1) + const [frequencyMetadata, setFrequencyMetadata] = useState({}) + const [labels, setLabels] = useState([]) + const [allUserThings, setAllUserThings] = useState([]) + const [thingTrigger, setThingTrigger] = useState({}) + const [isThingValid, setIsThingValid] = useState(false) + + const [notificationMetadata, setNotificationMetadata] = useState({}) + + const [isRolling, setIsRolling] = useState(false) + const [isNotificable, setIsNotificable] = useState(false) + const [isActive, setIsActive] = useState(true) + const [updatedBy, setUpdatedBy] = useState(0) + const [createdBy, setCreatedBy] = useState(0) + const [errors, setErrors] = useState({}) + const [attemptToSave, setAttemptToSave] = useState(false) + + const Navigate = useNavigate() + + const HandleValidateChore = () => { + const errors = {} + + if (name.trim() === '') { + errors.name = 'Name is required' + } + if (assignees.length === 0) { + errors.assignees = 'At least 1 assignees is required' + } + if (assignedTo < 0) { + errors.assignedTo = 'Assigned to is required' + } + if (frequencyType === 'interval' && frequency < 1) { + errors.frequency = 'Frequency is required' + } + if ( + frequencyType === 'days_of_the_week' && + frequencyMetadata['days']?.length === 0 + ) { + errors.frequency = 'At least 1 day is required' + } + if ( + frequencyType === 'day_of_the_month' && + frequencyMetadata['months']?.length === 0 + ) { + errors.frequency = 'At least 1 month is required' + } + if ( + dueDate === null && + !NO_DUE_DATE_REQUIRED_TYPE.includes(frequencyType) && + !NO_DUE_DATE_ALLOWED_TYPE.includes(frequencyType) + ) { + if (REPEAT_ON_TYPE.includes(frequencyType)) { + errors.dueDate = 'Start date is required' + } else { + errors.dueDate = 'Due date is required' + } + } + if (frequencyType === 'trigger') { + if (!isThingValid) { + errors.thingTrigger = 'Thing trigger is invalid' + } + } + + // if there is any error then return false: + setErrors(errors) + if (Object.keys(errors).length > 0) { + return false + } + return true + } + + const HandleSaveChore = () => { + setAttemptToSave(true) + if (!HandleValidateChore()) { + console.log('validation failed') + console.log(errors) + return + } + const chore = { + id: Number(choreId), + name: name, + assignees: assignees, + dueDate: dueDate ? new Date(dueDate).toISOString() : null, + frequencyType: frequencyType, + frequency: Number(frequency), + frequencyMetadata: frequencyMetadata, + assignedTo: assignedTo, + assignStrategy: assignStrategy, + isRolling: isRolling, + isActive: isActive, + notification: isNotificable, + labels: labels, + notificationMetadata: notificationMetadata, + thingTrigger: thingTrigger, + } + let SaveFunction = CreateChore + if (choreId > 0) { + SaveFunction = SaveChore + } + + SaveFunction(chore).then(response => { + if (response.status === 200) { + Navigate(`/my/chores`) + } else { + alert('Failed to save chore') + } + }) + } + useEffect(() => { + //fetch performers: + GetAllCircleMembers() + .then(response => response.json()) + .then(data => { + setPerformers(data.res) + }) + GetThings().then(response => { + response.json().then(data => { + setAllUserThings(data.res) + }) + }) + // fetch chores: + if (choreId > 0) { + GetChoreByID(choreId) + .then(response => { + if (response.status !== 200) { + alert('You are not authorized to view this chore.') + Navigate('/my/chores') + return null + } else { + return response.json() + } + }) + .then(data => { + setChore(data.res) + setName(data.res.name ? data.res.name : '') + setAssignees(data.res.assignees ? data.res.assignees : []) + setAssignedTo(data.res.assignedTo) + setFrequencyType( + data.res.frequencyType ? data.res.frequencyType : 'once', + ) + + setFrequencyMetadata(JSON.parse(data.res.frequencyMetadata)) + setFrequency(data.res.frequency) + + setNotificationMetadata(JSON.parse(data.res.notificationMetadata)) + setLabels(data.res.labels ? data.res.labels.split(',') : []) + + setAssignStrategy( + data.res.assignStrategy + ? data.res.assignStrategy + : ASSIGN_STRATEGIES[2], + ) + setIsRolling(data.res.isRolling) + setIsActive(data.res.isActive) + // parse the due date to a string from this format "2021-10-10T00:00:00.000Z" + // use moment.js or date-fns to format the date for to be usable in the input field: + setDueDate( + data.res.nextDueDate + ? moment(data.res.nextDueDate).format('YYYY-MM-DDTHH:mm:ss') + : null, + ) + setUpdatedBy(data.res.updatedBy) + setCreatedBy(data.res.createdBy) + setIsNotificable(data.res.notification) + setThingTrigger(data.res.thingChore) + // setDueDate(data.res.dueDate) + // setCompleted(data.res.completed) + // setCompletedDate(data.res.completedDate) + }) + + // fetch chores history: + GetChoreHistory(choreId) + .then(response => response.json()) + .then(data => { + setChoresHistory(data.res) + const newUserChoreHistory = {} + data.res.forEach(choreHistory => { + if (newUserChoreHistory[choreHistory.completedBy]) { + newUserChoreHistory[choreHistory.completedBy] += 1 + } else { + newUserChoreHistory[choreHistory.completedBy] = 1 + } + }) + + setUserHistory(newUserChoreHistory) + }) + } + // set focus on the first input field: + else { + // new task/ chore set focus on the first input field: + document.querySelector('input').focus() + } + }, []) + + useEffect(() => { + // if frequancy type change to somthing need a due date then set it to the current date: + if (!NO_DUE_DATE_REQUIRED_TYPE.includes(frequencyType) && !dueDate) { + setDueDate(moment(new Date()).format('YYYY-MM-DDTHH:mm:00')) + } + if (NO_DUE_DATE_ALLOWED_TYPE.includes(frequencyType)) { + setDueDate(null) + } + }, [frequencyType]) + + useEffect(() => { + if (assignees.length === 1) { + setAssignedTo(assignees[0].userId) + } + }, [assignees]) + + useEffect(() => { + if (performers.length > 0 && assignees.length === 0) { + setAssignees([ + { + userId: userProfile.id, + }, + ]) + } + }, [performers]) + + // if user resolve the error trigger validation to remove the error message from the respective field + useEffect(() => { + if (attemptToSave) { + HandleValidateChore() + } + }, [assignees, name, frequencyMetadata, attemptToSave, dueDate]) + + const handleDelete = () => { + setConfirmModelConfig({ + isOpen: true, + title: 'Delete Chore', + confirmText: 'Delete', + cancelText: 'Cancel', + message: 'Are you sure you want to delete this chore?', + onClose: isConfirmed => { + if (isConfirmed === true) { + DeleteChore(choreId).then(response => { + if (response.status === 200) { + Navigate('/my/chores') + } else { + alert('Failed to delete chore') + } + }) + } + setConfirmModelConfig({}) + }, + }) + } + return ( + <Container maxWidth='md'> + {/* <Typography level='h3' mb={1.5}> + Edit Chore + </Typography> */} + <Box> + <FormControl error={errors.name}> + <Typography level='h4'>Descritpion :</Typography> + <Typography level='h5'>What is this chore about?</Typography> + <Input value={name} onChange={e => setName(e.target.value)} /> + <FormHelperText error>{errors.name}</FormHelperText> + </FormControl> + </Box> + <Box mt={2}> + <Typography level='h4'>Assignees :</Typography> + <Typography level='h5'>Who can do this chore?</Typography> + <Card> + <List + orientation='horizontal' + wrap + sx={{ + '--List-gap': '8px', + '--ListItem-radius': '20px', + }} + > + {performers?.map((item, index) => ( + <ListItem key={item.id}> + <Checkbox + // disabled={index === 0} + checked={assignees.find(a => a.userId == item.id) != null} + onClick={() => { + if (assignees.find(a => a.userId == item.id)) { + setAssignees(assignees.filter(i => i.userId !== item.id)) + } else { + setAssignees([...assignees, { userId: item.id }]) + } + }} + overlay + disableIcon + variant='soft' + label={item.displayName} + /> + </ListItem> + ))} + </List> + </Card> + <FormControl error={Boolean(errors.assignee)}> + <FormHelperText error>{Boolean(errors.assignee)}</FormHelperText> + </FormControl> + </Box> + {assignees.length > 1 && ( + // this wrap the details that needed if we have more than one assingee + // we need to pick the next assignedTo and also the strategy to pick the next assignee. + // if we have only one then no need to display this section + <> + <Box mt={2}> + <Typography level='h4'>Assigned :</Typography> + <Typography level='h5'> + Who is assigned the next due chore? + </Typography> + + <Select + placeholder={ + assignees.length === 0 + ? 'No Assignees yet can perform this chore' + : 'Select an assignee for this chore' + } + disabled={assignees.length === 0} + value={assignedTo > -1 ? assignedTo : null} + > + {performers + ?.filter(p => assignees.find(a => a.userId == p.userId)) + .map((item, index) => ( + <Option + value={item.id} + key={item.displayName} + onClick={() => { + setAssignedTo(item.id) + }} + > + {item.displayName} + {/* <Chip size='sm' color='neutral' variant='soft'> + </Chip> */} + </Option> + ))} + </Select> + </Box> + <Box mt={2}> + <Typography level='h4'>Picking Mode :</Typography> + <Typography level='h5'> + How to pick the next assignee for the following chore? + </Typography> + + <Card> + <List + orientation='horizontal' + wrap + sx={{ + '--List-gap': '8px', + '--ListItem-radius': '20px', + }} + > + {ASSIGN_STRATEGIES.map((item, idx) => ( + <ListItem key={item}> + <Checkbox + // disabled={index === 0} + checked={assignStrategy === item} + onClick={() => setAssignStrategy(item)} + overlay + disableIcon + variant='soft' + label={item + .split('_') + .map(x => x.charAt(0).toUpperCase() + x.slice(1)) + .join(' ')} + /> + </ListItem> + ))} + </List> + </Card> + </Box> + </> + )} + <RepeatSection + frequency={frequency} + onFrequencyUpdate={setFrequency} + frequencyType={frequencyType} + onFrequencyTypeUpdate={setFrequencyType} + frequencyMetadata={frequencyMetadata} + onFrequencyMetadataUpdate={setFrequencyMetadata} + frequencyError={errors?.frequency} + allUserThings={allUserThings} + onTriggerUpdate={thingUpdate => { + if (thingUpdate === null) { + setThingTrigger(null) + return + } + setThingTrigger({ + triggerState: thingUpdate.triggerState, + condition: thingUpdate.condition, + thingID: thingUpdate.thing.id, + }) + }} + OnTriggerValidate={setIsThingValid} + isAttemptToSave={attemptToSave} + selectedThing={thingTrigger} + /> + + <Box mt={2}> + <Typography level='h4'> + {REPEAT_ON_TYPE.includes(frequencyType) ? 'Start date' : 'Due date'} : + </Typography> + {frequencyType === 'trigger' && !dueDate && ( + <Typography level='body-sm'> + Due Date will be set when the trigger of the thing is met + </Typography> + )} + + {NO_DUE_DATE_REQUIRED_TYPE.includes(frequencyType) && ( + <FormControl sx={{ mt: 1 }}> + <Checkbox + onChange={e => { + if (e.target.checked) { + setDueDate(moment(new Date()).format('YYYY-MM-DDTHH:mm:00')) + } else { + setDueDate(null) + } + }} + defaultChecked={dueDate !== null} + checked={dueDate !== null} + value={dueDate !== null} + overlay + label='Give this task a due date' + /> + <FormHelperText> + task needs to be completed by a specific time. + </FormHelperText> + </FormControl> + )} + {dueDate && ( + <FormControl error={Boolean(errors.dueDate)}> + <Typography level='h5'> + {REPEAT_ON_TYPE.includes(frequencyType) + ? 'When does this chore start?' + : 'When is the next first time this chore is due?'} + </Typography> + <Input + type='datetime-local' + value={dueDate} + onChange={e => { + setDueDate(e.target.value) + }} + /> + <FormHelperText>{errors.dueDate}</FormHelperText> + </FormControl> + )} + </Box> + {!['once', 'no_repeat'].includes(frequencyType) && ( + <Box mt={2}> + <Typography level='h4'>Scheduling Preferences: </Typography> + <Typography level='h5'> + How to reschedule the next due date? + </Typography> + + <RadioGroup name='tiers' sx={{ gap: 1, '& > div': { p: 1 } }}> + <FormControl> + <Radio + overlay + checked={!isRolling} + onClick={() => setIsRolling(false)} + label='Reschedule from due date' + /> + <FormHelperText> + the next task will be scheduled from the original due date, even + if the previous task was completed late + </FormHelperText> + </FormControl> + <FormControl> + <Radio + overlay + checked={isRolling} + onClick={() => setIsRolling(true)} + label='Reschedule from completion date' + /> + <FormHelperText> + the next task will be scheduled from the actual completion date + of the previous task + </FormHelperText> + </FormControl> + </RadioGroup> + </Box> + )} + <Box mt={2}> + <Typography level='h4'>Notifications : </Typography> + <Typography level='h5'> + Get Reminders when this task is due or completed + {!isPlusAccount(userProfile) && ( + <Chip variant='soft' color='warning'> + Not available in Basic Plan + </Chip> + )} + </Typography> + + <FormControl sx={{ mt: 1 }}> + <Checkbox + onChange={e => { + setIsNotificable(e.target.checked) + }} + defaultChecked={isNotificable} + checked={isNotificable} + value={isNotificable} + disabled={!isPlusAccount(userProfile)} + overlay + label='Notify for this task' + /> + <FormHelperText + sx={{ + opacity: !isPlusAccount(userProfile) ? 0.5 : 1, + }} + > + Receive notifications for this task + </FormHelperText> + </FormControl> + </Box> + {isNotificable && ( + <Box + ml={4} + sx={{ + display: 'flex', + flexDirection: 'column', + gap: 2, + + '& > div': { p: 2, borderRadius: 'md', display: 'flex' }, + }} + > + <Card variant='outlined'> + <Typography level='h5'> + What things should trigger the notification? + </Typography> + {[ + { + title: 'Due Date/Time', + description: 'A simple reminder that a task is due', + id: 'dueDate', + }, + // { + // title: 'Upon Completion', + // description: 'A notification when a task is completed', + // id: 'completion', + // }, + { + title: 'Predued', + description: 'before a task is due in few hours', + id: 'predue', + }, + { + title: 'Overdue', + description: 'A notification when a task is overdue', + }, + { + title: 'Nagging', + description: 'Daily reminders until the task is completed', + id: 'nagging', + }, + ].map(item => ( + <FormControl sx={{ mb: 1 }} key={item.id}> + <Checkbox + overlay + onClick={() => { + setNotificationMetadata({ + ...notificationMetadata, + [item.id]: !notificationMetadata[item.id], + }) + }} + checked={ + notificationMetadata ? notificationMetadata[item.id] : false + } + label={item.title} + key={item.title} + /> + <FormHelperText>{item.description}</FormHelperText> + </FormControl> + ))} + </Card> + </Box> + )} + <Box mt={2}> + <Typography level='h4'>Labels :</Typography> + <Typography level='h5'> + Things to remember about this chore or to tag it + </Typography> + <FreeSoloCreateOption + options={labels} + onSelectChange={changes => { + const newLabels = [] + changes.map(change => { + // if type is string : + if (typeof change === 'string') { + // add the change to the labels array: + newLabels.push(change) + } else { + newLabels.push(change.inputValue) + } + }) + setLabels(newLabels) + }} + /> + </Box> + {choreId > 0 && ( + <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}> + <Sheet + sx={{ + p: 2, + borderRadius: 'md', + boxShadow: 'sm', + }} + > + <Typography level='body1'> + Created by{' '} + <Chip variant='solid'> + {performers.find(f => f.id === createdBy)?.displayName} + </Chip>{' '} + {moment(chore.createdAt).fromNow()} + </Typography> + {(chore.updatedAt && updatedBy > 0 && ( + <> + <Divider sx={{ my: 1 }} /> + + <Typography level='body1'> + Updated by{' '} + <Chip variant='solid'> + {performers.find(f => f.id === updatedBy)?.displayName} + </Chip>{' '} + {moment(chore.updatedAt).fromNow()} + </Typography> + </> + )) || <></>} + </Sheet> + </Box> + )} + <Divider sx={{ mb: 9 }} /> + + {/* <Box mt={2} alignSelf={'flex-start'} display='flex' gap={2}> + <Button onClick={SaveChore}>Save</Button> + </Box> */} + <Sheet + variant='outlined' + sx={{ + position: 'fixed', + bottom: 0, + left: 0, + right: 0, + p: 2, // padding + display: 'flex', + justifyContent: 'flex-end', + gap: 2, + 'z-index': 1000, + bgcolor: 'background.body', + boxShadow: 'md', // Add a subtle shadow + }} + > + {choreId > 0 && ( + <Button + color='danger' + variant='solid' + onClick={() => { + // confirm before deleting: + handleDelete() + }} + > + Delete + </Button> + )} + <Button + color='neutral' + variant='outlined' + onClick={() => { + window.history.back() + }} + > + Cancel + </Button> + <Button color='primary' variant='solid' onClick={HandleSaveChore}> + {choreId > 0 ? 'Save' : 'Create'} + </Button> + </Sheet> + <ConfirmationModal config={confirmModelConfig} /> + {/* <ChoreHistory ChoreHistory={choresHistory} UsersData={performers} /> */} + </Container> + ) +} + +export default ChoreEdit diff --git a/src/views/ChoreEdit/RepeatSection.jsx b/src/views/ChoreEdit/RepeatSection.jsx new file mode 100644 index 0000000..cb680eb --- /dev/null +++ b/src/views/ChoreEdit/RepeatSection.jsx @@ -0,0 +1,496 @@ +import { + Box, + Card, + Checkbox, + Chip, + FormControl, + FormHelperText, + Grid, + Input, + List, + ListItem, + Option, + Radio, + RadioGroup, + Select, + Typography, +} from '@mui/joy' +import { useContext, useState } from 'react' +import { UserContext } from '../../contexts/UserContext' +import { isPlusAccount } from '../../utils/Helpers' +import ThingTriggerSection from './ThingTriggerSection' + +const FREQUANCY_TYPES_RADIOS = [ + 'daily', + 'weekly', + 'monthly', + 'yearly', + 'adaptive', + 'custom', +] + +const FREQUENCY_TYPE_MESSAGE = { + adaptive: + 'This chore will be scheduled dynamically based on previous completion dates.', + custom: 'This chore will be scheduled based on a custom frequency.', +} +const REPEAT_ON_TYPE = ['interval', 'days_of_the_week', 'day_of_the_month'] +const FREQUANCY_TYPES = [ + 'once', + 'daily', + 'weekly', + 'monthly', + 'yearly', + 'adaptive', + ...REPEAT_ON_TYPE, +] +const MONTH_WITH_NO_31_DAYS = [ + // TODO: Handle these months if day is 31 + 'february', + 'april', + 'june', + 'september', + 'november', +] +const RepeatOnSections = ({ + frequencyType, + frequency, + onFrequencyUpdate, + onFrequencyTypeUpdate, + frequencyMetadata, + onFrequencyMetadataUpdate, + things, +}) => { + const [months, setMonths] = useState({}) + // const [dayOftheMonth, setDayOftheMonth] = useState(1) + const [daysOfTheWeek, setDaysOfTheWeek] = useState({}) + const [monthsOfTheYear, setMonthsOfTheYear] = useState({}) + const [intervalUnit, setIntervalUnit] = useState('days') + + switch (frequencyType) { + case 'interval': + return ( + <Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}> + <Typography level='h5'>Every: </Typography> + <Input + type='number' + value={frequency} + onChange={e => { + if (e.target.value < 1) { + e.target.value = 1 + } + onFrequencyUpdate(e.target.value) + }} + /> + <Select placeholder='Unit' value={intervalUnit}> + {['hours', 'days', 'weeks', 'months', 'years'].map(item => ( + <Option + key={item} + value={item} + onClick={() => { + setIntervalUnit(item) + onFrequencyMetadataUpdate({ + unit: item, + }) + }} + > + {item.charAt(0).toUpperCase() + item.slice(1)} + </Option> + ))} + </Select> + </Grid> + ) + case 'days_of_the_week': + return ( + <Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}> + <Card> + <List + orientation='horizontal' + wrap + sx={{ + '--List-gap': '8px', + '--ListItem-radius': '20px', + }} + > + {[ + 'monday', + 'tuesday', + 'wednesday', + 'thursday', + 'friday', + 'saturday', + 'sunday', + ].map(item => ( + <ListItem key={item}> + <Checkbox + // disabled={index === 0} + + checked={frequencyMetadata?.days?.includes(item) || false} + onClick={() => { + const newDaysOfTheWeek = frequencyMetadata['days'] || [] + if (newDaysOfTheWeek.includes(item)) { + newDaysOfTheWeek.splice( + newDaysOfTheWeek.indexOf(item), + 1, + ) + } else { + newDaysOfTheWeek.push(item) + } + + onFrequencyMetadataUpdate({ + days: newDaysOfTheWeek.sort(), + }) + }} + overlay + disableIcon + variant='soft' + label={item.charAt(0).toUpperCase() + item.slice(1)} + /> + </ListItem> + ))} + </List> + </Card> + </Grid> + ) + case 'day_of_the_month': + return ( + <Grid + item + sm={12} + sx={{ + display: 'flex', + alignItems: 'center', + flexDirection: 'column', + justifyContent: 'space-between', + }} + > + <Box + sx={{ + display: 'flex', + alignItems: 'center', + mb: 1.5, + }} + > + <Typography>on the </Typography> + <Input + sx={{ width: '80px' }} + type='number' + value={frequency} + onChange={e => { + if (e.target.value < 1) { + e.target.value = 1 + } else if (e.target.value > 31) { + e.target.value = 31 + } + // setDayOftheMonth(e.target.value) + + onFrequencyUpdate(e.target.value) + }} + /> + <Typography>of the following month/s: </Typography> + </Box> + <Card> + <List + orientation='horizontal' + wrap + sx={{ + '--List-gap': '8px', + '--ListItem-radius': '20px', + }} + > + {[ + 'january', + 'february', + 'march', + 'april', + 'may', + 'june', + 'july', + 'august', + 'september', + 'october', + 'november', + 'december', + ].map(item => ( + <ListItem key={item}> + <Checkbox + // disabled={index === 0} + checked={frequencyMetadata?.months?.includes(item)} + // checked={months[item] || false} + // onClick={() => { + // const newMonthsOfTheYear = { + // ...monthsOfTheYear, + // } + // newMonthsOfTheYear[item] = !newMonthsOfTheYear[item] + // onFrequencyMetadataUpdate({ + // months: newMonthsOfTheYear, + // }) + // setMonthsOfTheYear(newMonthsOfTheYear) + // }} + onClick={() => { + const newMonthsOfTheYear = + frequencyMetadata['months'] || [] + if (newMonthsOfTheYear.includes(item)) { + newMonthsOfTheYear.splice( + newMonthsOfTheYear.indexOf(item), + 1, + ) + } else { + newMonthsOfTheYear.push(item) + } + + onFrequencyMetadataUpdate({ + months: newMonthsOfTheYear.sort(), + }) + console.log('newMonthsOfTheYear', newMonthsOfTheYear) + // setDaysOfTheWeek(newDaysOfTheWeek) + }} + overlay + disableIcon + variant='soft' + label={item.charAt(0).toUpperCase() + item.slice(1)} + /> + </ListItem> + ))} + </List> + </Card> + </Grid> + ) + + default: + return <></> + } +} + +const RepeatSection = ({ + frequencyType, + frequency, + onFrequencyUpdate, + onFrequencyTypeUpdate, + frequencyMetadata, + onFrequencyMetadataUpdate, + frequencyError, + allUserThings, + onTriggerUpdate, + OnTriggerValidate, + isAttemptToSave, + selectedThing, +}) => { + const [repeatOn, setRepeatOn] = useState('interval') + const { userProfile, setUserProfile } = useContext(UserContext) + return ( + <Box mt={2}> + <Typography level='h4'>Repeat :</Typography> + <FormControl sx={{ mt: 1 }}> + <Checkbox + onChange={e => { + onFrequencyTypeUpdate(e.target.checked ? 'daily' : 'once') + if (e.target.checked) { + onTriggerUpdate(null) + } + }} + defaultChecked={!['once', 'trigger'].includes(frequencyType)} + checked={!['once', 'trigger'].includes(frequencyType)} + value={!['once', 'trigger'].includes(frequencyType)} + overlay + label='Repeat this task' + /> + <FormHelperText> + Is this something needed to be done regularly? + </FormHelperText> + </FormControl> + {!['once', 'trigger'].includes(frequencyType) && ( + <> + <Card sx={{ mt: 1 }}> + <Typography level='h5'>How often should it be repeated?</Typography> + + <List + orientation='horizontal' + wrap + sx={{ + '--List-gap': '8px', + '--ListItem-radius': '20px', + }} + > + {FREQUANCY_TYPES_RADIOS.map((item, index) => ( + <ListItem key={item}> + <Checkbox + // disabled={index === 0} + checked={ + item === frequencyType || + (item === 'custom' && + REPEAT_ON_TYPE.includes(frequencyType)) + } + // defaultChecked={item === frequencyType} + onClick={() => { + if (item === 'custom') { + onFrequencyTypeUpdate(REPEAT_ON_TYPE[0]) + onFrequencyUpdate(1) + onFrequencyMetadataUpdate({ + unit: 'days', + }) + return + } + onFrequencyTypeUpdate(item) + }} + overlay + disableIcon + variant='soft' + label={ + item.charAt(0).toUpperCase() + + item.slice(1).replace('_', ' ') + } + /> + </ListItem> + ))} + </List> + <Typography>{FREQUENCY_TYPE_MESSAGE[frequencyType]}</Typography> + {frequencyType === 'custom' || + (REPEAT_ON_TYPE.includes(frequencyType) && ( + <> + <Grid container spacing={1} mt={2}> + <Grid item> + <Typography>Repeat on:</Typography> + <Box + sx={{ display: 'flex', alignItems: 'center', gap: 2 }} + > + <RadioGroup + orientation='horizontal' + aria-labelledby='segmented-controls-example' + name='justify' + // value={justify} + // onChange={event => setJustify(event.target.value)} + sx={{ + minHeight: 48, + padding: '4px', + borderRadius: '12px', + bgcolor: 'neutral.softBg', + '--RadioGroup-gap': '4px', + '--Radio-actionRadius': '8px', + mb: 1, + }} + > + {REPEAT_ON_TYPE.map(item => ( + <Radio + key={item} + color='neutral' + checked={item === frequencyType} + onClick={() => { + if ( + item === 'day_of_the_month' || + item === 'interval' + ) { + onFrequencyUpdate(1) + } + onFrequencyTypeUpdate(item) + if (item === 'days_of_the_week') { + onFrequencyMetadataUpdate({ days: [] }) + } else if (item === 'day_of_the_month') { + onFrequencyMetadataUpdate({ months: [] }) + } else if (item === 'interval') { + onFrequencyMetadataUpdate({ unit: 'days' }) + } + // setRepeatOn(item) + }} + value={item} + disableIcon + label={item + .split('_') + .map((i, idx) => { + // first or last word + if ( + idx === 0 || + idx === item.split('_').length - 1 + ) { + return ( + i.charAt(0).toUpperCase() + i.slice(1) + ) + } + return i + }) + .join(' ')} + variant='plain' + sx={{ + px: 2, + alignItems: 'center', + }} + slotProps={{ + action: ({ checked }) => ({ + sx: { + ...(checked && { + bgcolor: 'background.surface', + boxShadow: 'sm', + '&:hover': { + bgcolor: 'background.surface', + }, + }), + }, + }), + }} + /> + ))} + </RadioGroup> + </Box> + </Grid> + + <RepeatOnSections + frequency={frequency} + onFrequencyUpdate={onFrequencyUpdate} + frequencyType={frequencyType} + onFrequencyTypeUpdate={onFrequencyTypeUpdate} + frequencyMetadata={frequencyMetadata || {}} + onFrequencyMetadataUpdate={onFrequencyMetadataUpdate} + things={allUserThings} + /> + </Grid> + </> + ))} + <FormControl error={Boolean(frequencyError)}> + <FormHelperText error>{frequencyError}</FormHelperText> + </FormControl> + </Card> + </> + )} + <FormControl sx={{ mt: 1 }}> + <Checkbox + onChange={e => { + onFrequencyTypeUpdate(e.target.checked ? 'trigger' : 'once') + // if unchecked, set selectedThing to null: + if (!e.target.checked) { + onTriggerUpdate(null) + } + }} + defaultChecked={frequencyType === 'trigger'} + checked={frequencyType === 'trigger'} + value={frequencyType === 'trigger'} + disabled={!isPlusAccount(userProfile)} + overlay + label='Trigger this task based on a thing state' + /> + <FormHelperText + sx={{ + opacity: !isPlusAccount(userProfile) ? 0.5 : 1, + }} + > + Is this something that should be done when a thing state changes?{' '} + {!isPlusAccount(userProfile) && ( + <Chip variant='soft' color='warning'> + Not available in Basic Plan + </Chip> + )} + </FormHelperText> + </FormControl> + {frequencyType === 'trigger' && ( + <ThingTriggerSection + things={allUserThings} + onTriggerUpdate={onTriggerUpdate} + onValidate={OnTriggerValidate} + isAttemptToSave={isAttemptToSave} + selected={selectedThing} + /> + )} + </Box> + ) +} + +export default RepeatSection diff --git a/src/views/ChoreEdit/ThingTriggerSection.jsx b/src/views/ChoreEdit/ThingTriggerSection.jsx new file mode 100644 index 0000000..7a040ad --- /dev/null +++ b/src/views/ChoreEdit/ThingTriggerSection.jsx @@ -0,0 +1,230 @@ +import { Widgets } from '@mui/icons-material' +import { + Autocomplete, + Box, + Button, + Card, + Chip, + FormControl, + FormLabel, + Input, + ListItem, + ListItemContent, + ListItemDecorator, + Option, + Select, + TextField, + Typography, +} from '@mui/joy' +import { useEffect, useState } from 'react' +import { useNavigate } from 'react-router-dom' +const isValidTrigger = (thing, condition, triggerState) => { + const newErrors = {} + if (!thing || !triggerState) { + newErrors.thing = 'Please select a thing and trigger state' + return false + } + if (thing.type === 'boolean') { + if (['true', 'false'].includes(triggerState)) { + return true + } else { + newErrors.type = 'Boolean type does not require a condition' + return false + } + } + if (thing.type === 'number') { + if (isNaN(triggerState)) { + newErrors.triggerState = 'Trigger state must be a number' + return false + } + if (['eq', 'neq', 'gt', 'gte', 'lt', 'lte'].includes(condition)) { + return true + } + } + if (thing.type === 'text') { + if (typeof triggerState === 'string') { + return true + } + } + newErrors.triggerState = 'Trigger state must be a number' + + return false +} + +const ThingTriggerSection = ({ + things, + onTriggerUpdate, + onValidate, + selected, + isAttepmtingToSave, +}) => { + const [selectedThing, setSelectedThing] = useState(null) + const [condition, setCondition] = useState(null) + const [triggerState, setTriggerState] = useState(null) + const navigate = useNavigate() + + useEffect(() => { + if (selected) { + setSelectedThing(things?.find(t => t.id === selected.thingId)) + setCondition(selected.condition) + setTriggerState(selected.triggerState) + } + }, [things]) + + useEffect(() => { + if (selectedThing && triggerState) { + onTriggerUpdate({ + thing: selectedThing, + condition: condition, + triggerState: triggerState, + }) + } + if (isValidTrigger(selectedThing, condition, triggerState)) { + onValidate(true) + } else { + onValidate(false) + } + }, [selectedThing, condition, triggerState]) + + return ( + <Card sx={{ mt: 1 }}> + <Typography level='h5'> + Trigger a task when a thing state changes to a desired state + </Typography> + {things.length !== 0 && ( + <Typography level='body-sm'> + it's look like you don't have any things yet, create a thing to + trigger a task when the state changes. + <Button + startDecorator={<Widgets />} + size='sm' + onClick={() => { + navigate('/things') + }} + > + Go to Things + </Button>{' '} + to create a thing + </Typography> + )} + <FormControl error={isAttepmtingToSave && !selectedThing}> + <Autocomplete + options={things} + value={selectedThing} + onChange={(e, newValue) => setSelectedThing(newValue)} + getOptionLabel={option => option.name} + renderOption={(props, option) => ( + <ListItem {...props}> + <Box + sx={{ + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + alignItems: 'center', + p: 1, + }} + > + <ListItemDecorator sx={{ alignSelf: 'flex-start' }}> + <Typography level='body-lg' textColor='primary'> + {option.name} + </Typography> + </ListItemDecorator> + <ListItemContent> + <Typography level='body2' textColor='text.secondary'> + <Chip>type: {option.type}</Chip>{' '} + <Chip>state: {option.state}</Chip> + </Typography> + </ListItemContent> + </Box> + </ListItem> + )} + renderInput={params => ( + <TextField {...params} label='Select a thing' /> + )} + /> + </FormControl> + <Typography level='body-sm'> + Create a condition to trigger a task when the thing state changes to + desired state + </Typography> + {selectedThing?.type == 'boolean' && ( + <Box> + <Typography level='body-sm'> + When the state of {selectedThing.name} changes as specified below, + the task will become due. + </Typography> + <Select + value={triggerState} + onChange={e => { + if (e?.target.value === 'true' || e?.target.value === 'false') + setTriggerState(e.target.value) + else setTriggerState('false') + }} + > + {['true', 'false'].map(state => ( + <Option + key={state} + value={state} + onClick={() => setTriggerState(state)} + > + {state.charAt(0).toUpperCase() + state.slice(1)} + </Option> + ))} + </Select> + </Box> + )} + {selectedThing?.type == 'number' && ( + <Box> + <Typography level='body-sm'> + When the state of {selectedThing.name} changes as specified below, + the task will become due. + </Typography> + + <Box sx={{ display: 'flex', gap: 1, direction: 'row' }}> + <Typography level='body-sm'>State is</Typography> + <Select value={condition} sx={{ width: '50%' }}> + {[ + { name: 'Equal', value: 'eq' }, + { name: 'Not equal', value: 'neq' }, + { name: 'Greater than', value: 'gt' }, + { name: 'Greater than or equal', value: 'gte' }, + { name: 'Less than', value: 'lt' }, + { name: 'Less than or equal', value: 'lte' }, + ].map(condition => ( + <Option + key={condition.value} + value={condition.value} + onClick={() => setCondition(condition.value)} + > + {condition.name} + </Option> + ))} + </Select> + <Input + type='number' + value={triggerState} + onChange={e => setTriggerState(e.target.value)} + sx={{ width: '50%' }} + /> + </Box> + </Box> + )} + {selectedThing?.type == 'text' && ( + <Box> + <Typography level='body-sm'> + When the state of {selectedThing.name} changes as specified below, + the task will become due. + </Typography> + + <Input + value={triggerState} + onChange={e => setTriggerState(e.target.value)} + label='Enter the text to trigger the task' + /> + </Box> + )} + </Card> + ) +} + +export default ThingTriggerSection diff --git a/src/views/Chores/ChoreCard.jsx b/src/views/Chores/ChoreCard.jsx new file mode 100644 index 0000000..0b2a408 --- /dev/null +++ b/src/views/Chores/ChoreCard.jsx @@ -0,0 +1,578 @@ +import { + Check, + Delete, + Edit, + HowToReg, + KeyboardDoubleArrowUp, + LocalOffer, + ManageSearch, + MoreTime, + MoreVert, + NoteAdd, + RecordVoiceOver, + Repeat, + Report, + SwitchAccessShortcut, + TimesOneMobiledata, + Update, + Webhook, +} from '@mui/icons-material' +import { + Avatar, + Box, + Card, + Chip, + CircularProgress, + Divider, + Grid, + IconButton, + Menu, + MenuItem, + Typography, +} from '@mui/joy' +import moment from 'moment' +import React, { useEffect } from 'react' +import { useNavigate } from 'react-router-dom' +import { API_URL } from '../../Config' +import { Fetch } from '../../utils/TokenManager' +import ConfirmationModal from '../Modals/Inputs/ConfirmationModal' +import DateModal from '../Modals/Inputs/DateModal' +import SelectModal from '../Modals/Inputs/SelectModal' +import TextModal from '../Modals/Inputs/TextModal' +const ChoreCard = ({ chore, performers, onChoreUpdate, onChoreRemove, sx }) => { + const [activeUserId, setActiveUserId] = React.useState(0) + const [isChangeDueDateModalOpen, setIsChangeDueDateModalOpen] = + React.useState(false) + const [isCompleteWithPastDateModalOpen, setIsCompleteWithPastDateModalOpen] = + React.useState(false) + const [isChangeAssigneeModalOpen, setIsChangeAssigneeModalOpen] = + React.useState(false) + const [isCompleteWithNoteModalOpen, setIsCompleteWithNoteModalOpen] = + React.useState(false) + const [confirmModelConfig, setConfirmModelConfig] = React.useState({}) + const [anchorEl, setAnchorEl] = React.useState(null) + const menuRef = React.useRef(null) + const navigate = useNavigate() + const [isDisabled, setIsDisabled] = React.useState(false) + + // useEffect(() => { + // GetAllUsers() + // .then(response => response.json()) + // .then(data => { + // setPerformers(data.res) + // }) + // }, []) + + useEffect(() => { + document.addEventListener('mousedown', handleMenuOutsideClick) + return () => { + document.removeEventListener('mousedown', handleMenuOutsideClick) + } + }, [anchorEl]) + + const handleMenuOpen = event => { + setAnchorEl(event.currentTarget) + } + + const handleMenuClose = () => { + setAnchorEl(null) + } + + const handleMenuOutsideClick = event => { + if ( + anchorEl && + !anchorEl.contains(event.target) && + !menuRef.current.contains(event.target) + ) { + handleMenuClose() + } + } + const handleEdit = () => { + navigate(`/chores/${chore.id}/edit`) + } + const handleDelete = () => { + setConfirmModelConfig({ + isOpen: true, + title: 'Delete Chore', + confirmText: 'Delete', + cancelText: 'Cancel', + message: 'Are you sure you want to delete this chore?', + onClose: isConfirmed => { + console.log('isConfirmed', isConfirmed) + if (isConfirmed === true) { + Fetch(`${API_URL}/chores/${chore.id}`, { + method: 'DELETE', + }).then(response => { + if (response.ok) { + onChoreRemove(chore) + } + }) + } + setConfirmModelConfig({}) + }, + }) + } + + const handleCompleteChore = () => { + Fetch(`${API_URL}/chores/${chore.id}/do`, { + method: 'POST', + }).then(response => { + if (response.ok) { + response.json().then(data => { + const newChore = data.res + onChoreUpdate(newChore, 'completed') + }) + } + }) + setIsDisabled(true) + setTimeout(() => setIsDisabled(false), 5000) // Re-enable the button after 5 seconds + } + const handleChangeDueDate = newDate => { + if (activeUserId === null) { + alert('Please select a performer') + return + } + Fetch(`${API_URL}/chores/${chore.id}/dueDate`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + dueDate: newDate ? new Date(newDate).toISOString() : null, + UpdatedBy: activeUserId, + }), + }).then(response => { + if (response.ok) { + response.json().then(data => { + const newChore = data.res + onChoreUpdate(newChore, 'rescheduled') + }) + } + }) + } + + const handleCompleteWithPastDate = newDate => { + if (activeUserId === null) { + alert('Please select a performer') + return + } + Fetch( + `${API_URL}/chores/${chore.id}/do?completedDate=${new Date( + newDate, + ).toISOString()}`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({}), + }, + ).then(response => { + if (response.ok) { + response.json().then(data => { + const newChore = data.res + onChoreUpdate(newChore, 'completed') + }) + } + }) + } + const handleAssigneChange = assigneeId => { + // TODO: Implement assignee change + } + const handleCompleteWithNote = note => { + Fetch(`${API_URL}/chores/${chore.id}/do`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + note: note, + }), + }).then(response => { + if (response.ok) { + response.json().then(data => { + const newChore = data.res + onChoreUpdate(newChore, 'completed') + }) + } + }) + } + const getDueDateChipText = nextDueDate => { + if (chore.nextDueDate === null) return 'No Due Date' + // if due in next 48 hours, we should it in this format : Tomorrow 11:00 AM + const diff = moment(nextDueDate).diff(moment(), 'hours') + if (diff < 48 && diff > 0) { + return moment(nextDueDate).calendar().replace(' at', '') + } + return 'Due ' + moment(nextDueDate).fromNow() + } + const getDueDateChipColor = nextDueDate => { + if (chore.nextDueDate === null) return 'neutral' + const diff = moment(nextDueDate).diff(moment(), 'hours') + if (diff < 48 && diff > 0) { + return 'warning' + } + if (diff < 0) { + return 'danger' + } + + return 'neutral' + } + + const getIconForLabel = label => { + if (!label || label.trim() === '') return <></> + switch (String(label).toLowerCase()) { + case 'high': + return <KeyboardDoubleArrowUp /> + case 'important': + return <Report /> + default: + return <LocalOffer /> + } + } + + const getRecurrentChipText = chore => { + const dayOfMonthSuffix = n => { + if (n >= 11 && n <= 13) { + return 'th' + } + switch (n % 10) { + case 1: + return 'st' + case 2: + return 'nd' + case 3: + return 'rd' + default: + return 'th' + } + } + if (chore.frequencyType === 'once') { + return 'Once' + } else if (chore.frequencyType === 'trigger') { + return 'Trigger' + } else if (chore.frequencyType === 'daily') { + return 'Daily' + } else if (chore.frequencyType === 'weekly') { + return 'Weekly' + } else if (chore.frequencyType === 'monthly') { + return 'Monthly' + } else if (chore.frequencyType === 'yearly') { + return 'Yearly' + } else if (chore.frequencyType === 'days_of_the_week') { + let days = JSON.parse(chore.frequencyMetadata).days + days = days.map(d => moment().day(d).format('ddd')) + return days.join(', ') + } else if (chore.frequencyType === 'day_of_the_month') { + let freqData = JSON.parse(chore.frequencyMetadata) + const months = freqData.months.map(m => moment().month(m).format('MMM')) + return `${chore.frequency}${dayOfMonthSuffix( + chore.frequency, + )} of ${months.join(', ')}` + } else if (chore.frequencyType === 'interval') { + return `Every ${chore.frequency} ${ + JSON.parse(chore.frequencyMetadata).unit + }` + } else { + return chore.frequencyType + } + } + + const getFrequencyIcon = chore => { + if (['once', 'no_repeat'].includes(chore.frequencyType)) { + return <TimesOneMobiledata /> + } else if (chore.frequencyType === 'trigger') { + return <Webhook /> + } else { + return <Repeat /> + } + } + + return ( + <> + <Chip + variant='soft' + sx={{ + position: 'relative', + top: 10, + zIndex: 1, + left: 10, + }} + color={getDueDateChipColor(chore.nextDueDate)} + > + {getDueDateChipText(chore.nextDueDate)} + </Chip> + + <Chip + variant='soft' + sx={{ + position: 'relative', + top: 10, + zIndex: 1, + ml: 0.4, + left: 10, + }} + > + <div + style={{ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }} + > + {getFrequencyIcon(chore)} + + {getRecurrentChipText(chore)} + </div> + </Chip> + + <Card + variant='plain' + sx={{ + ...sx, + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + p: 2, + // backgroundColor: 'white', + boxShadow: 'sm', + borderRadius: 20, + + // mb: 2, + }} + > + <Grid container> + <Grid item xs={9}> + {/* Box in top right with Chip showing next due date */} + <Box display='flex' justifyContent='start' alignItems='center'> + <Avatar sx={{ mr: 1, fontSize: 22 }}> + {chore.name.charAt(0).toUpperCase()} + </Avatar> + <Box display='flex' flexDirection='column'> + <Typography level='title-md'>{chore.name}</Typography> + <Typography level='body-md' color='text.disabled'> + Assigned to{' '} + <Chip variant='outlined'> + { + performers.find(p => p.id === chore.assignedTo) + ?.displayName + } + </Chip> + </Typography> + <Box> + {chore.labels?.split(',').map(label => ( + <Chip + variant='solid' + key={label} + color='primary' + sx={{ + position: 'relative', + ml: 0.5, + top: 10, + zIndex: 1, + left: 10, + }} + startDecorator={getIconForLabel(label)} + > + {label} + </Chip> + ))} + </Box> + </Box> + </Box> + {/* <Box display='flex' justifyContent='space-between' alignItems='center'> + <Chip variant='outlined'> + {chore.nextDueDate === null + ? '--' + : 'Due ' + moment(chore.nextDueDate).fromNow()} + </Chip> + </Box> */} + </Grid> + <Grid + item + xs={3} + sx={{ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }} + > + <Box display='flex' justifyContent='flex-end' alignItems='flex-end'> + {/* <ButtonGroup> */} + <IconButton + variant='solid' + color='success' + onClick={handleCompleteChore} + disabled={isDisabled} + sx={{ + borderRadius: '50%', + width: 50, + height: 50, + zIndex: 1, + }} + > + <div className='relative grid place-items-center'> + <Check /> + {isDisabled && ( + <CircularProgress + variant='solid' + color='success' + size='md' + sx={{ + color: 'success.main', + position: 'absolute', + zIndex: 0, + }} + /> + )} + </div> + </IconButton> + <IconButton + // sx={{ width: 15 }} + variant='soft' + color='success' + onClick={handleMenuOpen} + sx={{ + borderRadius: '50%', + width: 25, + height: 25, + position: 'relative', + left: -10, + }} + > + <MoreVert /> + </IconButton> + {/* </ButtonGroup> */} + <Menu + size='md' + ref={menuRef} + anchorEl={anchorEl} + open={Boolean(anchorEl)} + onClose={handleMenuClose} + > + <MenuItem + onClick={() => { + setIsCompleteWithNoteModalOpen(true) + }} + > + <NoteAdd /> + Complete with note + </MenuItem> + <MenuItem + onClick={() => { + setIsCompleteWithPastDateModalOpen(true) + }} + > + <Update /> + Complete in past + </MenuItem> + <MenuItem + onClick={() => { + Fetch(`${API_URL}/chores/${chore.id}/skip`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({}), + }).then(response => { + if (response.ok) { + response.json().then(data => { + const newChore = data.res + onChoreUpdate(newChore, 'skipped') + handleMenuClose() + }) + } + }) + }} + > + <SwitchAccessShortcut /> + Skip to next due date + </MenuItem> + <MenuItem + onClick={() => { + setIsChangeAssigneeModalOpen(true) + }} + > + <RecordVoiceOver /> + Delegate to someone else + </MenuItem> + <MenuItem> + <HowToReg /> + Complete as someone else + </MenuItem> + <Divider /> + <MenuItem + onClick={() => { + navigate(`/chores/${chore.id}/history`) + }} + > + <ManageSearch /> + History + </MenuItem> + <Divider /> + <MenuItem + onClick={() => { + setIsChangeDueDateModalOpen(true) + }} + > + <MoreTime /> + Change due date + </MenuItem> + <MenuItem onClick={handleEdit}> + <Edit /> + Edit + </MenuItem> + <MenuItem onClick={handleDelete} color='danger'> + <Delete /> + Delete + </MenuItem> + </Menu> + </Box> + </Grid> + </Grid> + <DateModal + isOpen={isChangeDueDateModalOpen} + key={'changeDueDate' + chore.id} + current={chore.nextDueDate} + title={`Change due date`} + onClose={() => { + setIsChangeDueDateModalOpen(false) + }} + onSave={handleChangeDueDate} + /> + <DateModal + isOpen={isCompleteWithPastDateModalOpen} + key={'completedInPast' + chore.id} + current={chore.nextDueDate} + title={`Save Chore that you completed in the past`} + onClose={() => { + setIsCompleteWithPastDateModalOpen(false) + }} + onSave={handleCompleteWithPastDate} + /> + <SelectModal + isOpen={isChangeAssigneeModalOpen} + options={performers} + displayKey='displayName' + title={`Delegate to someone else`} + onClose={() => { + setIsChangeAssigneeModalOpen(false) + }} + onSave={handleAssigneChange} + /> + <ConfirmationModal config={confirmModelConfig} /> + <TextModal + isOpen={isCompleteWithNoteModalOpen} + title='Add note to attach to this completion:' + onClose={() => { + setIsCompleteWithNoteModalOpen(false) + }} + okText={'Complete'} + onSave={handleCompleteWithNote} + /> + </Card> + </> + ) +} + +export default ChoreCard diff --git a/src/views/Chores/MyChores.jsx b/src/views/Chores/MyChores.jsx new file mode 100644 index 0000000..98fd443 --- /dev/null +++ b/src/views/Chores/MyChores.jsx @@ -0,0 +1,384 @@ +import { Add, EditCalendar } from '@mui/icons-material' +import { + Badge, + Box, + Checkbox, + CircularProgress, + Container, + IconButton, + List, + ListItem, + Menu, + MenuItem, + Snackbar, + Typography, +} from '@mui/joy' +import { useContext, useEffect, useRef, useState } from 'react' +import { useNavigate } from 'react-router-dom' +import { UserContext } from '../../contexts/UserContext' +import Logo from '../../Logo' +import { GetAllUsers, GetChores, GetUserProfile } from '../../utils/Fetcher' +import ChoreCard from './ChoreCard' + +const MyChores = () => { + const { userProfile, setUserProfile } = useContext(UserContext) + const [isSnackbarOpen, setIsSnackbarOpen] = useState(false) + const [snackBarMessage, setSnackBarMessage] = useState(null) + const [chores, setChores] = useState([]) + const [filteredChores, setFilteredChores] = useState([]) + const [selectedFilter, setSelectedFilter] = useState('All') + const [activeUserId, setActiveUserId] = useState(0) + const [performers, setPerformers] = useState([]) + const [anchorEl, setAnchorEl] = useState(null) + const menuRef = useRef(null) + const Navigate = useNavigate() + const choreSorter = (a, b) => { + // 1. Handle null due dates (always last): + if (!a.nextDueDate && !b.nextDueDate) return 0 // Both null, no order + if (!a.nextDueDate) return 1 // a is null, comes later + if (!b.nextDueDate) return -1 // b is null, comes earlier + + const aDueDate = new Date(a.nextDueDate) + const bDueDate = new Date(b.nextDueDate) + const now = new Date() + + const oneDayInMs = 24 * 60 * 60 * 1000 + + // 2. Prioritize tasks due today +- 1 day: + const aTodayOrNear = Math.abs(aDueDate - now) <= oneDayInMs + const bTodayOrNear = Math.abs(bDueDate - now) <= oneDayInMs + if (aTodayOrNear && !bTodayOrNear) return -1 // a is closer + if (!aTodayOrNear && bTodayOrNear) return 1 // b is closer + + // 3. Handle overdue tasks (excluding today +- 1): + const aOverdue = aDueDate < now && !aTodayOrNear + const bOverdue = bDueDate < now && !bTodayOrNear + if (aOverdue && !bOverdue) return -1 // a is overdue, comes earlier + if (!aOverdue && bOverdue) return 1 // b is overdue, comes earlier + + // 4. Sort future tasks by due date: + return aDueDate - bDueDate // Sort ascending by due date + } + + const handleSelectedFilter = selected => { + setFilteredChores(FILTERS[selected](chores)) + + setSelectedFilter(selected) + } + + useEffect(() => { + if (userProfile === null) { + GetUserProfile() + .then(response => response.json()) + .then(data => { + setUserProfile(data.res) + }) + } + GetChores() + .then(response => response.json()) + .then(data => { + data.res.sort(choreSorter) + setChores(data.res) + + setFilteredChores(data.res) + }) + + GetAllUsers() + .then(response => response.json()) + .then(data => { + setPerformers(data.res) + }) + + const currentUser = JSON.parse(localStorage.getItem('user')) + if (currentUser !== null) { + setActiveUserId(currentUser.id) + } + }, []) + useEffect(() => { + document.addEventListener('mousedown', handleMenuOutsideClick) + return () => { + document.removeEventListener('mousedown', handleMenuOutsideClick) + } + }, [anchorEl]) + const handleMenuOutsideClick = event => { + if ( + anchorEl && + !anchorEl.contains(event.target) && + !menuRef.current.contains(event.target) + ) { + handleFilterMenuClose() + } + } + const handleFilterMenuOpen = event => { + event.preventDefault() + setAnchorEl(event.currentTarget) + } + + const handleFilterMenuClose = () => { + setAnchorEl(null) + } + const handleChoreUpdated = (updatedChore, event) => { + const newChores = chores.map(chore => { + if (chore.id === updatedChore.id) { + return updatedChore + } + return chore + }) + + const newFilteredChores = filteredChores.map(chore => { + if (chore.id === updatedChore.id) { + return updatedChore + } + return chore + }) + setChores(newChores) + setFilteredChores(newFilteredChores) + switch (event) { + case 'completed': + setSnackBarMessage('Completed') + break + case 'skipped': + setSnackBarMessage('Skipped') + break + case 'rescheduled': + setSnackBarMessage('Rescheduled') + break + default: + setSnackBarMessage('Updated') + } + setIsSnackbarOpen(true) + } + + const handleChoreDeleted = deletedChore => { + const newChores = chores.filter(chore => chore.id !== deletedChore.id) + const newFilteredChores = filteredChores.filter( + chore => chore.id !== deletedChore.id, + ) + setChores(newChores) + setFilteredChores(newFilteredChores) + } + + if (userProfile === null) { + return ( + <Container className='flex h-full items-center justify-center'> + <Box className='flex flex-col items-center justify-center'> + <CircularProgress + color='success' + sx={{ '--CircularProgress-size': '200px' }} + > + <Logo /> + </CircularProgress> + </Box> + </Container> + ) + } + + return ( + <Container maxWidth='md'> + {/* <Typography level='h3' mb={1.5}> + My Chores + </Typography> */} + {/* <Sheet> */} + <List + orientation='horizontal' + wrap + sx={{ + '--List-gap': '8px', + '--ListItem-radius': '20px', + '--ListItem-minHeight': '32px', + '--ListItem-gap': '4px', + mt: 0.2, + }} + > + {['All', 'Overdue', 'Due today', 'Due in week'].map(filter => ( + <Badge + key={filter} + anchorOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + variant='outlined' + color={selectedFilter === filter ? 'primary' : 'neutral'} + badgeContent={FILTERS[filter](chores).length} + badgeInset={'5px'} + > + <ListItem key={filter}> + <Checkbox + key={'checkbox' + filter} + label={filter} + onClick={() => handleSelectedFilter(filter)} + checked={filter === selectedFilter} + disableIcon + overlay + size='sm' + /> + </ListItem> + </Badge> + ))} + + <ListItem onClick={handleFilterMenuOpen}> + <Checkbox key='checkboxAll' label='⋮' disableIcon overlay size='lg' /> + </ListItem> + <Menu + ref={menuRef} + anchorEl={anchorEl} + open={Boolean(anchorEl)} + onClose={handleFilterMenuClose} + > + <MenuItem + onClick={() => { + setFilteredChores( + FILTERS['Assigned To Me'](chores, userProfile.id), + ) + setSelectedFilter('Assigned To Me') + handleFilterMenuClose() + }} + > + Assigned to me + </MenuItem> + <MenuItem + onClick={() => { + setFilteredChores( + FILTERS['Created By Me'](chores, userProfile.id), + ) + setSelectedFilter('Created By Me') + handleFilterMenuClose() + }} + > + Created by me + </MenuItem> + <MenuItem + onClick={() => { + setFilteredChores(FILTERS['No Due Date'](chores, userProfile.id)) + setSelectedFilter('No Due Date') + handleFilterMenuClose() + }} + > + No Due Date + </MenuItem> + </Menu> + </List> + {/* </Sheet> */} + {filteredChores.length === 0 && ( + <Box + sx={{ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'column', + height: '50vh', + }} + > + <EditCalendar + sx={{ + fontSize: '4rem', + // color: 'text.disabled', + mb: 1, + }} + /> + <Typography level='title-md' gutterBottom> + Nothing scheduled + </Typography> + </Box> + )} + + {filteredChores.map(chore => ( + <ChoreCard + key={chore.id} + chore={chore} + onChoreUpdate={handleChoreUpdated} + onChoreRemove={handleChoreDeleted} + performers={performers} + /> + ))} + + <Box + // variant='outlined' + sx={{ + position: 'fixed', + bottom: 0, + left: 10, + p: 2, // padding + display: 'flex', + justifyContent: 'flex-end', + gap: 2, + 'z-index': 1000, + }} + > + <IconButton + color='primary' + variant='solid' + sx={{ + borderRadius: '50%', + width: 50, + height: 50, + }} + // startDecorator={<Add />} + onClick={() => { + Navigate(`/chores/create`) + }} + > + <Add /> + </IconButton> + </Box> + <Snackbar + open={isSnackbarOpen} + onClose={() => { + setIsSnackbarOpen(false) + }} + autoHideDuration={3000} + variant='soft' + color='success' + size='lg' + invertedColors + > + <Typography level='title-md'>{snackBarMessage}</Typography> + </Snackbar> + </Container> + ) +} + +const FILTERS = { + All: function (chores) { + return chores + }, + Overdue: function (chores) { + return chores.filter(chore => { + if (chore.nextDueDate === null) return false + return new Date(chore.nextDueDate) < new Date() + }) + }, + 'Due today': function (chores) { + return chores.filter(chore => { + return ( + new Date(chore.nextDueDate).toDateString() === new Date().toDateString() + ) + }) + }, + 'Due in week': function (chores) { + return chores.filter(chore => { + return ( + new Date(chore.nextDueDate) < + new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) && + new Date(chore.nextDueDate) > new Date() + ) + }) + }, + 'Created By Me': function (chores, userID) { + return chores.filter(chore => { + return chore.createdBy === userID + }) + }, + 'Assigned To Me': function (chores, userID) { + return chores.filter(chore => { + return chore.assignedTo === userID + }) + }, + 'No Due Date': function (chores, userID) { + return chores.filter(chore => { + return chore.nextDueDate === null + }) + }, +} + +export default MyChores diff --git a/src/views/ChoresOverview.jsx b/src/views/ChoresOverview.jsx new file mode 100644 index 0000000..396ab0d --- /dev/null +++ b/src/views/ChoresOverview.jsx @@ -0,0 +1,354 @@ +import { + Adjust, + CancelRounded, + CheckBox, + Edit, + HelpOutline, + History, + QueryBuilder, + SearchRounded, + Warning, +} from '@mui/icons-material' +import { + Avatar, + Button, + ButtonGroup, + Chip, + Container, + Grid, + IconButton, + Input, + Table, + Tooltip, + Typography, +} from '@mui/joy' + +import moment from 'moment' +import { useEffect, useState } from 'react' +import { useNavigate } from 'react-router-dom' +import { API_URL } from '../Config' +import { GetAllUsers } from '../utils/Fetcher' +import { Fetch } from '../utils/TokenManager' +import DateModal from './Modals/Inputs/DateModal' +// import moment from 'moment' + +// enum for chore status: +const CHORE_STATUS = { + NO_DUE_DATE: 'No due date', + DUE_SOON: 'Soon', + DUE_NOW: 'Due', + OVER_DUE: 'Overdue', +} + +const ChoresOverview = () => { + const [chores, setChores] = useState([]) + const [filteredChores, setFilteredChores] = useState([]) + const [performers, setPerformers] = useState([]) + const [activeUserId, setActiveUserId] = useState(null) + const [isDateModalOpen, setIsDateModalOpen] = useState(false) + const [choreId, setChoreId] = useState(null) + const [search, setSearch] = useState('') + const Navigate = useNavigate() + + const getChoreStatus = chore => { + if (chore.nextDueDate === null) { + return CHORE_STATUS.NO_DUE_DATE + } + const dueDate = new Date(chore.nextDueDate) + const now = new Date() + const diff = dueDate - now + if (diff < 0) { + return CHORE_STATUS.OVER_DUE + } + if (diff > 1000 * 60 * 60 * 24) { + return CHORE_STATUS.DUE_NOW + } + if (diff > 0) { + return CHORE_STATUS.DUE_SOON + } + return CHORE_STATUS.NO_DUE_DATE + } + const getChoreStatusColor = chore => { + switch (getChoreStatus(chore)) { + case CHORE_STATUS.NO_DUE_DATE: + return 'neutral' + case CHORE_STATUS.DUE_SOON: + return 'success' + case CHORE_STATUS.DUE_NOW: + return 'primary' + case CHORE_STATUS.OVER_DUE: + return 'warning' + default: + return 'neutral' + } + } + const getChoreStatusIcon = chore => { + switch (getChoreStatus(chore)) { + case CHORE_STATUS.NO_DUE_DATE: + return <HelpOutline /> + case CHORE_STATUS.DUE_SOON: + return <QueryBuilder /> + case CHORE_STATUS.DUE_NOW: + return <Adjust /> + case CHORE_STATUS.OVER_DUE: + return <Warning /> + default: + return <HelpOutline /> + } + } + useEffect(() => { + // fetch chores: + Fetch(`${API_URL}/chores/`) + .then(response => response.json()) + .then(data => { + const filteredData = data.res.filter( + chore => chore.assignedTo === activeUserId || chore.assignedTo === 0, + ) + setChores(data.res) + setFilteredChores(data.res) + }) + GetAllUsers() + .then(response => response.json()) + .then(data => { + setPerformers(data.res) + }) + const user = JSON.parse(localStorage.getItem('user')) + if (user != null && user.id > 0) { + setActiveUserId(user.id) + } + }, []) + + return ( + <Container> + <Typography level='h4' mb={1.5}> + Chores Overviews + </Typography> + {/* <SummaryCard /> */} + <Grid container> + <Grid + item + sm={6} + alignSelf={'flex-start'} + minWidth={100} + display='flex' + gap={2} + > + <Input + placeholder='Search' + value={search} + onChange={e => { + if (e.target.value === '') { + setFilteredChores(chores) + } + setSearch(e.target.value) + const newChores = chores.filter(chore => { + return chore.name.includes(e.target.value) + }) + setFilteredChores(newChores) + }} + endDecorator={ + search !== '' ? ( + <Button + variant='text' + onClick={() => { + setSearch('') + setFilteredChores(chores) + }} + > + <CancelRounded /> + </Button> + ) : ( + <Button variant='text'> + <SearchRounded /> + </Button> + ) + } + ></Input> + </Grid> + <Grid item sm={6} justifyContent={'flex-end'} display={'flex'} gap={2}> + <Button + onClick={() => { + Navigate(`/chores/create`) + }} + > + New Chore + </Button> + </Grid> + </Grid> + + <Table> + <thead> + <tr> + {/* first column has minium size because its icon */} + <th style={{ width: 100 }}>Due</th> + <th>Chore</th> + <th>Assignee</th> + <th>Due</th> + <th>Action</th> + </tr> + </thead> + <tbody> + {filteredChores.map(chore => ( + <tr key={chore.id}> + {/* cirular icon if the chore is due will be red else yellow: */} + <td> + <Chip color={getChoreStatusColor(chore)}> + {getChoreStatus(chore)} + </Chip> + </td> + <td + onClick={() => { + Navigate(`/chores/${chore.id}/edit`) + }} + > + {chore.name || '--'} + </td> + <td> + {chore.assignedTo > 0 ? ( + <Tooltip + title={ + performers.find(p => p.id === chore.assignedTo) + ?.displayName + } + size='sm' + > + <Chip + startDecorator={ + <Avatar color='primary'> + { + performers.find(p => p.id === chore.assignedTo) + ?.displayName[0] + } + </Avatar> + } + > + {performers.find(p => p.id === chore.assignedTo)?.name} + </Chip> + </Tooltip> + ) : ( + <Chip + color='warning' + startDecorator={<Avatar color='primary'>?</Avatar>} + > + Unassigned + </Chip> + )} + </td> + <td> + <Tooltip + title={ + chore.nextDueDate === null + ? 'no due date' + : moment(chore.nextDueDate).format('YYYY-MM-DD') + } + size='sm' + > + <Typography> + {chore.nextDueDate === null + ? '--' + : moment(chore.nextDueDate).fromNow()} + </Typography> + </Tooltip> + </td> + + <td> + <ButtonGroup + // display='flex' + // // justifyContent='space-around' + // alignItems={'center'} + // gap={0.5} + > + <IconButton + variant='outlined' + size='sm' + // sx={{ borderRadius: '50%' }} + onClick={() => { + Fetch(`${API_URL}/chores/${chore.id}/do`, { + method: 'POST', + }).then(response => { + if (response.ok) { + response.json().then(data => { + const newChore = data.res + const newChores = [...chores] + const index = newChores.findIndex( + c => c.id === chore.id, + ) + newChores[index] = newChore + setChores(newChores) + setFilteredChores(newChores) + }) + } + }) + }} + aria-setsize={2} + > + <CheckBox /> + </IconButton> + <IconButton + variant='outlined' + size='sm' + // sx={{ borderRadius: '50%' }} + onClick={() => { + setChoreId(chore.id) + setIsDateModalOpen(true) + }} + aria-setsize={2} + > + <History /> + </IconButton> + <IconButton + variant='outlined' + size='sm' + // sx={{ + // borderRadius: '50%', + // }} + onClick={() => { + Navigate(`/chores/${chore.id}/edit`) + }} + > + <Edit /> + </IconButton> + </ButtonGroup> + </td> + </tr> + ))} + </tbody> + </Table> + <DateModal + isOpen={isDateModalOpen} + key={choreId} + title={`Change due date`} + onClose={() => { + setIsDateModalOpen(false) + }} + onSave={date => { + if (activeUserId === null) { + alert('Please select a performer') + return + } + fetch( + `${API_URL}/chores/${choreId}/do?performer=${activeUserId}&completedDate=${new Date( + date, + ).toISOString()}`, + { + method: 'POST', + }, + ).then(response => { + if (response.ok) { + response.json().then(data => { + const newChore = data.res + const newChores = [...chores] + const index = newChores.findIndex(c => c.id === chore.id) + newChores[index] = newChore + setChores(newChores) + setFilteredChores(newChores) + }) + } + }) + }} + /> + </Container> + ) +} + +export default ChoresOverview diff --git a/src/views/Circles/JoinCircle.jsx b/src/views/Circles/JoinCircle.jsx new file mode 100644 index 0000000..fd6d542 --- /dev/null +++ b/src/views/Circles/JoinCircle.jsx @@ -0,0 +1,154 @@ +import { Box, Container, Input, Sheet, Typography } from '@mui/joy' +import Logo from '../../Logo' + +import { Button } from '@mui/joy' +import { useContext } from 'react' +import { useNavigate, useSearchParams } from 'react-router-dom' +import { UserContext } from '../../contexts/UserContext' +import { JoinCircle } from '../../utils/Fetcher' +const JoinCircleView = () => { + const { userProfile, setUserProfile } = useContext(UserContext) + let [searchParams, setSearchParams] = useSearchParams() + const navigate = useNavigate() + const code = searchParams.get('code') + + return ( + <Container + component='main' + maxWidth='xs' + + // make content center in the middle of the page: + > + <Box + sx={{ + marginTop: 4, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }} + > + <Sheet + component='form' + sx={{ + mt: 1, + width: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: 2, + borderRadius: '8px', + boxShadow: 'md', + }} + > + {/* <img + src='/src/assets/logo.svg' + alt='logo' + width='128px' + height='128px' + /> */} + <Logo /> + + <Typography level='h2'> + Done + <span + style={{ + color: '#06b6d4', + }} + > + tick + </span> + </Typography> + {code && userProfile && ( + <> + <Typography level='body-md' alignSelf={'center'}> + Hi {userProfile?.displayName}, you have been invited to join the + circle{' '} + </Typography> + <Input + fullWidth + placeholder='Enter code' + value={code} + disabled={!!code} + size='lg' + sx={{ + width: '220px', + mb: 1, + }} + /> + <Typography level='body-md' alignSelf={'center'}> + Joining will give you access to the circle's chores and members. + </Typography> + <Typography level='body-md' alignSelf={'center'}> + You can leave the circle later from you Settings page. + </Typography> + <Button + fullWidth + size='lg' + sx={{ mt: 3, mb: 2 }} + onClick={() => { + JoinCircle(code).then(resp => { + if (resp.ok) { + alert( + 'Joined circle successfully, wait for the circle owner to accept your request.', + ) + navigate('/my/chores') + } else { + if (resp.status === 409) { + alert('You are already a member of this circle') + } else { + alert('Failed to join circle') + } + navigate('/my/chores') + } + }) + }} + > + Join Circle + </Button> + <Button + fullWidth + size='lg' + q + variant='plain' + sx={{ + width: '100%', + mb: 2, + border: 'moccasin', + borderRadius: '8px', + }} + onClick={() => { + navigate('/my/chores') + }} + > + Cancel + </Button> + </> + )} + {!code || + (!userProfile && ( + <> + <Typography level='body-md' alignSelf={'center'}> + You need to be logged in to join a circle + </Typography> + <Typography level='body-md' alignSelf={'center'} sx={{ mb: 9 }}> + Login or sign up to continue + </Typography> + <Button + fullWidth + size='lg' + sx={{ mt: 3, mb: 2 }} + onClick={() => { + navigate('/login') + }} + > + Login + </Button> + </> + ))} + </Sheet> + </Box> + </Container> + ) +} + +export default JoinCircleView diff --git a/src/views/Error.jsx b/src/views/Error.jsx new file mode 100644 index 0000000..d04fc29 --- /dev/null +++ b/src/views/Error.jsx @@ -0,0 +1,11 @@ +import { Typography } from '@mui/joy' + +const Error = () => { + return ( + <div className='grid min-h-screen place-items-center'> + <Typography level='h1'>404</Typography> + </div> + ) +} + +export default Error diff --git a/src/views/History/BigChip.jsx b/src/views/History/BigChip.jsx new file mode 100644 index 0000000..4987367 --- /dev/null +++ b/src/views/History/BigChip.jsx @@ -0,0 +1,26 @@ +import Chip from '@mui/joy/Chip' +import * as React from 'react' + +function BigChip(props) { + return ( + <Chip + variant='outlined' + color='primary' + size='lg' // Adjust to your desired size + sx={{ + fontSize: '1rem', // Example: Increase font size + padding: '1rem', // Example: Increase padding + height: '1rem', // Adjust to your desired height + // Add other custom styles as needed + }} + {...props} + > + {props.children} + </Chip> + ) +} + +export default BigChip +BigChip.propTypes = { + ...Chip.propTypes, +} diff --git a/src/views/History/ChoreHistory.jsx b/src/views/History/ChoreHistory.jsx new file mode 100644 index 0000000..22ea6a9 --- /dev/null +++ b/src/views/History/ChoreHistory.jsx @@ -0,0 +1,344 @@ +import { Checklist, EventBusy, Timelapse } from '@mui/icons-material' +import { + Avatar, + Box, + Button, + Chip, + CircularProgress, + Container, + Grid, + List, + ListDivider, + ListItem, + ListItemContent, + ListItemDecorator, + Sheet, + Typography, +} from '@mui/joy' +import moment from 'moment' +import React, { useEffect, useState } from 'react' +import { Link, useParams } from 'react-router-dom' +import { API_URL } from '../../Config' +import { GetAllCircleMembers } from '../../utils/Fetcher' +import { Fetch } from '../../utils/TokenManager' + +const ChoreHistory = () => { + const [choreHistory, setChoresHistory] = useState([]) + const [userHistory, setUserHistory] = useState([]) + const [performers, setPerformers] = useState([]) + const [historyInfo, setHistoryInfo] = useState([]) + + const [isLoading, setIsLoading] = useState(true) // Add loading state + const { choreId } = useParams() + + useEffect(() => { + setIsLoading(true) // Start loading + + Promise.all([ + Fetch(`${API_URL}/chores/${choreId}/history`).then(res => res.json()), + GetAllCircleMembers().then(res => res.json()), + ]) + .then(([historyData, usersData]) => { + setChoresHistory(historyData.res) + + const newUserChoreHistory = {} + historyData.res.forEach(choreHistory => { + const userId = choreHistory.completedBy + newUserChoreHistory[userId] = (newUserChoreHistory[userId] || 0) + 1 + }) + setUserHistory(newUserChoreHistory) + + setPerformers(usersData.res) + updateHistoryInfo(historyData.res, newUserChoreHistory, usersData.res) + }) + .catch(error => { + console.error('Error fetching data:', error) + // Handle errors, e.g., show an error message to the user + }) + .finally(() => { + setIsLoading(false) // Finish loading + }) + }, [choreId]) + + const updateHistoryInfo = (histories, userHistories, performers) => { + // average delay for task completaion from due date: + + const averageDelay = + histories.reduce((acc, chore) => { + if (chore.dueDate) { + // Only consider chores with a due date + return acc + moment(chore.completedAt).diff(chore.dueDate, 'hours') + } + return acc + }, 0) / histories.length + const averageDelayMoment = moment.duration(averageDelay, 'hours') + const maximumDelay = histories.reduce((acc, chore) => { + if (chore.dueDate) { + // Only consider chores with a due date + const delay = moment(chore.completedAt).diff(chore.dueDate, 'hours') + return delay > acc ? delay : acc + } + return acc + }, 0) + + const maxDelayMoment = moment.duration(maximumDelay, 'hours') + + // find max value in userHistories: + const userCompletedByMost = Object.keys(userHistories).reduce((a, b) => + userHistories[a] > userHistories[b] ? a : b, + ) + const userCompletedByLeast = Object.keys(userHistories).reduce((a, b) => + userHistories[a] < userHistories[b] ? a : b, + ) + + const historyInfo = [ + { + icon: ( + <Avatar> + <Checklist /> + </Avatar> + ), + text: `${histories.length} completed`, + subtext: `${Object.keys(userHistories).length} users contributed`, + }, + { + icon: ( + <Avatar> + <Timelapse /> + </Avatar> + ), + text: `Completed within ${moment + .duration(averageDelayMoment) + .humanize()}`, + subtext: `Maximum delay was ${moment + .duration(maxDelayMoment) + .humanize()}`, + }, + { + icon: <Avatar></Avatar>, + text: `${ + performers.find(p => p.userId === Number(userCompletedByMost)) + ?.displayName + } completed most`, + subtext: `${userHistories[userCompletedByMost]} time/s`, + }, + ] + if (userCompletedByLeast !== userCompletedByMost) { + historyInfo.push({ + icon: ( + <Avatar> + { + performers.find(p => p.userId === userCompletedByLeast) + ?.displayName + } + </Avatar> + ), + text: `${ + performers.find(p => p.userId === Number(userCompletedByLeast)) + .displayName + } completed least`, + subtext: `${userHistories[userCompletedByLeast]} time/s`, + }) + } + + setHistoryInfo(historyInfo) + } + + function formatTimeDifference(startDate, endDate) { + const diffInMinutes = moment(startDate).diff(endDate, 'minutes') + let timeValue = diffInMinutes + let unit = 'minute' + + if (diffInMinutes >= 60) { + const diffInHours = moment(startDate).diff(endDate, 'hours') + timeValue = diffInHours + unit = 'hour' + + if (diffInHours >= 24) { + const diffInDays = moment(startDate).diff(endDate, 'days') + timeValue = diffInDays + unit = 'day' + } + } + + return `${timeValue} ${unit}${timeValue !== 1 ? 's' : ''}` + } + if (isLoading) { + return <CircularProgress /> // Show loading indicator + } + if (!choreHistory.length) { + return ( + <Container + maxWidth='md' + sx={{ + textAlign: 'center', + display: 'flex', + // make sure the content is centered vertically: + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'column', + height: '50vh', + }} + > + <EventBusy + sx={{ + fontSize: '6rem', + // color: 'text.disabled', + mb: 1, + }} + /> + + <Typography level='h3' gutterBottom> + No History Yet + </Typography> + <Typography level='body1'> + You haven't completed any tasks. Once you start finishing tasks, + they'll show up here. + </Typography> + <Button variant='soft' sx={{ mt: 2 }}> + <Link to='/my/chores'>Go back to chores</Link> + </Button> + </Container> + ) + } + + return ( + <Container maxWidth='md'> + <Typography level='h3' mb={1.5}> + Summary: + </Typography> + {/* <Sheet sx={{ mb: 1, borderRadius: 'sm', p: 2, boxShadow: 'md' }}> + <ListItem sx={{ gap: 1.5 }}> + <ListItemDecorator> + <Avatar> + <AccountCircle /> + </Avatar> + </ListItemDecorator> + <ListItemContent> + <Typography level='body1' sx={{ fontWeight: 'md' }}> + {choreHistory.length} completed + </Typography> + <Typography level='body2' color='text.tertiary'> + {Object.keys(userHistory).length} users contributed + </Typography> + </ListItemContent> + </ListItem> + </Sheet> */} + <Grid container> + {historyInfo.map((info, index) => ( + <Grid key={index} item xs={12} sm={6}> + <Sheet sx={{ mb: 1, borderRadius: 'sm', p: 2, boxShadow: 'md' }}> + <ListItem sx={{ gap: 1.5 }}> + <ListItemDecorator>{info.icon}</ListItemDecorator> + <ListItemContent> + <Typography level='body1' sx={{ fontWeight: 'md' }}> + {info.text} + </Typography> + <Typography level='body1' color='text.tertiary'> + {info.subtext} + </Typography> + </ListItemContent> + </ListItem> + </Sheet> + </Grid> + ))} + </Grid> + {/* User History Cards */} + <Typography level='h3' my={1.5}> + History: + </Typography> + <Box sx={{ borderRadius: 'sm', p: 2, boxShadow: 'md' }}> + {/* Chore History List (Updated Style) */} + + <List sx={{ p: 0 }}> + {choreHistory.map((chore, index) => ( + <> + <ListItem sx={{ gap: 1.5, alignItems: 'flex-start' }}> + {' '} + {/* Adjusted spacing and alignment */} + <ListItemDecorator> + <Avatar sx={{ mr: 1 }}> + {performers + .find(p => p.userId === chore.completedBy) + ?.displayName?.charAt(0) || '?'} + </Avatar> + </ListItemDecorator> + <ListItemContent sx={{ my: 0 }}> + {' '} + {/* Removed vertical margin */} + <Box + sx={{ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + }} + > + <Typography level='body1' sx={{ fontWeight: 'md' }}> + {moment(chore.completedAt).format('ddd MM/DD/yyyy HH:mm')} + </Typography> + + <Chip> + {chore.dueDate && chore.completedAt > chore.dueDate + ? 'Late' + : 'On Time'} + </Chip> + </Box> + <Typography level='body2' color='text.tertiary'> + <Chip> + { + performers.find(p => p.userId === chore.completedBy) + ?.displayName + } + </Chip>{' '} + completed + {chore.completedBy !== chore.assignedTo && ( + <> + {', '} + assigned to{' '} + <Chip> + { + performers.find(p => p.userId === chore.assignedTo) + ?.displayName + } + </Chip> + </> + )} + </Typography> + {chore.dueDate && ( + <Typography level='body2' color='text.tertiary'> + Due: {moment(chore.dueDate).format('ddd MM/DD/yyyy')} + </Typography> + )} + {chore.notes && ( + <Typography level='body2' color='text.tertiary'> + Note: {chore.notes} + </Typography> + )} + </ListItemContent> + </ListItem> + {index < choreHistory.length - 1 && ( + <> + <ListDivider component='li'> + {/* time between two completion: */} + {index < choreHistory.length - 1 && + choreHistory[index + 1].completedAt && ( + <Typography level='body3' color='text.tertiary'> + {formatTimeDifference( + chore.completedAt, + choreHistory[index + 1].completedAt, + )}{' '} + before + </Typography> + )} + </ListDivider> + </> + )} + </> + ))} + </List> + </Box> + </Container> + ) +} + +export default ChoreHistory diff --git a/src/views/History/InfoCard.jsx b/src/views/History/InfoCard.jsx new file mode 100644 index 0000000..bf1ada8 --- /dev/null +++ b/src/views/History/InfoCard.jsx @@ -0,0 +1,26 @@ +import { AddTask } from '@mui/icons-material' +import { Box } from '@mui/joy' +import Card from '@mui/joy/Card' +import CardContent from '@mui/joy/CardContent' +import Typography from '@mui/joy/Typography' +import * as React from 'react' + +function InfoCard() { + return ( + <Card sx={{ minWidth: 200, maxWidth: 200 }}> + <CardContent> + <Box mb={2} sx={{ textAlign: 'left' }}> + <AddTask + sx={{ + fontSize: '2.5em' /* Increase the font size */, + }} + /> + </Box> + <Typography level='title-md'>You've completed</Typography> + <Typography level='body-sm'>12345 Chores</Typography> + </CardContent> + </Card> + ) +} + +export default InfoCard diff --git a/src/views/Home.jsx b/src/views/Home.jsx new file mode 100644 index 0000000..4b16a1e --- /dev/null +++ b/src/views/Home.jsx @@ -0,0 +1,46 @@ +import { Box, Button, Container, Typography } from '@mui/joy' +import { useEffect } from 'react' +import { useNavigate } from 'react-router-dom' + +import { useState } from 'react' +import Logo from '../Logo' +const Home = () => { + const Navigate = useNavigate() + const getCurrentUser = () => { + return JSON.parse(localStorage.getItem('user')) + } + const [users, setUsers] = useState([]) + const [currentUser, setCurrentUser] = useState(getCurrentUser()) + + useEffect(() => {}, []) + + return ( + <Container className='flex h-full items-center justify-center'> + <Box className='flex flex-col items-center justify-center'> + <Logo /> + <Typography level='h1'> + Done + <span + style={{ + color: '#06b6d4', + }} + > + tick + </span> + </Typography> + </Box> + <Box className='flex flex-col items-center justify-center' mt={10}> + <Button + sx={{ mt: 1 }} + onClick={() => { + Navigate('/my/chores') + }} + > + Get Started! + </Button> + </Box> + </Container> + ) +} + +export default Home diff --git a/src/views/Landing/FeaturesSection.jsx b/src/views/Landing/FeaturesSection.jsx new file mode 100644 index 0000000..a7da1f0 --- /dev/null +++ b/src/views/Landing/FeaturesSection.jsx @@ -0,0 +1,139 @@ +import { + AutoAwesomeMosaicOutlined, + AutoAwesomeRounded, + CodeRounded, + GroupRounded, + HistoryRounded, + Webhook, +} from '@mui/icons-material' +import Card from '@mui/joy/Card' +import Container from '@mui/joy/Container' +import Typography from '@mui/joy/Typography' +import { styled } from '@mui/system' + +const FeatureIcon = styled('div')({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#f0f0f0', // Adjust the background color as needed + borderRadius: '50%', + minWidth: '60px', + height: '60px', + marginRight: '16px', +}) + +const CardData = [ + { + title: 'Open Source & Transparent', + headline: 'Built for the Community', + description: + 'Donetick is a community-driven, open-source project. Contribute, customize, and make task management truly yours.', + icon: CodeRounded, + }, + { + title: 'Circles: Your Task Hub', + headline: 'Share & Conquer Together', + description: + 'Create circles for your family, friends, or team. Easily share tasks and track progress within each group.', + icon: GroupRounded, + }, + { + title: 'Track Your Progress', + headline: "See Who's Done What", + description: + 'View a history of task completion for each member of your circles. Celebrate successes and stay on top of your goals.', + icon: HistoryRounded, + }, + { + title: 'Automated Chore Scheduling', + headline: 'Fully Customizable Recurring Tasks', + description: + 'Set up chores to repeat daily, weekly, or monthly. Donetick will automatically assign and track each task for you.', + icon: AutoAwesomeMosaicOutlined, + }, + { + title: 'Automated Task Assignment', + headline: 'Share Responsibilities Equally', + description: + 'can automatically assigns tasks to each member of your circle. Randomly or based on past completion.', + icon: AutoAwesomeRounded, + }, + { + title: 'Integrations & Webhooks', + headline: 'API & 3rd Party Integrations', + description: + 'Connect Donetick with your favorite apps and services. Trigger tasks based on events from other platforms.', + icon: Webhook, + }, +] + +function Feature2({ icon: Icon, title, headline, description, index }) { + return ( + <Card + variant='plain' + sx={{ textAlign: 'left', p: 2 }} + data-aos-delay={100 * index} + data-aos-anchor='[data-aos-id-features2-blocks]' + data-aos='fade-up' + > + <div style={{ display: 'flex', alignItems: 'center' }}> + <FeatureIcon> + <Icon + color='primary' + style={{ Width: '30px', height: '30px' }} + stroke={1.5} + /> + </FeatureIcon> + <div> + {/* Changes are within this div */} + <Typography level='h4' mt={1} mb={0.5}> + {title} + </Typography> + <Typography level='body-sm' color='neutral' lineHeight={1.4}> + {headline} + </Typography> + </div> + </div> + <Typography level='body-md' color='neutral' lineHeight={1.6}> + {description} + </Typography> + </Card> + ) +} + +function FeaturesSection() { + const features = CardData.map((feature, index) => ( + <Feature2 + icon={feature.icon} + title={feature.title} + headline={feature.headline} + description={feature.description} + index={index} + key={index} + /> + )) + + return ( + <Container sx={{ textAlign: 'center' }}> + <Typography level='h4' mt={2} mb={4}> + Donetick + </Typography> + + <Container maxWidth={'lg'} sx={{ mb: 8 }}> + <Typography level='body-md' color='neutral'> + Navigate personal growth with genuine insights, thoughtful privacy, + and actionable steps tailored just for you. + </Typography> + </Container> + + <div + className='align-center mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3' + data-aos-id-features2-blocks + > + {features} + </div> + </Container> + ) +} + +export default FeaturesSection diff --git a/src/views/Landing/HomeHero.jsx b/src/views/Landing/HomeHero.jsx new file mode 100644 index 0000000..a96374a --- /dev/null +++ b/src/views/Landing/HomeHero.jsx @@ -0,0 +1,186 @@ +/* eslint-disable tailwindcss/no-custom-classname */ +// import { StyledButton } from '@/components/styled-button' +import { Button } from '@mui/joy' +import Typography from '@mui/joy/Typography' +import Box from '@mui/material/Box' +import Grid from '@mui/material/Grid' +import React from 'react' +import { useNavigate } from 'react-router-dom' + +import Logo from '@/assets/logo.svg' +import screenShotMyChore from '@/assets/screenshot-my-chore.png' +import { GitHub } from '@mui/icons-material' + +const HomeHero = () => { + const navigate = useNavigate() + const HERO_TEXT_THAT = [ + // 'Donetick simplifies the entire process, from scheduling and reminders to automatic task assignment and progress tracking.', + // 'Donetick is the intuitive task and chore management app designed for groups. Take charge of shared responsibilities, automate your workflow, and achieve more together.', + 'An open-source, user-friendly app for managing tasks and chores, featuring customizable options to help you and others stay organized', + ] + + const [heroTextIndex, setHeroTextIndex] = React.useState(0) + + React.useEffect(() => { + // const intervalId = setInterval( + // () => setHeroTextIndex(index => index + 1), + // 4000, // every 4 seconds + // ) + // return () => clearTimeout(intervalId) + }, []) + + const Title = () => ( + <Box + sx={{ + textAlign: 'center', + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }} + > + <img src={Logo} width={'100px'} /> + <Typography level='h1' fontSize={58} fontWeight={800}> + <span + data-aos-delay={50 * 1} + data-aos-anchor='[data-aos-id-hero]' + data-aos='fade-up' + > + Done + </span> + <span + data-aos-delay={100 * 3} + data-aos-anchor='[data-aos-id-hero]' + data-aos='fade-up' + style={{ + color: '#06b6d4', + }} + > + tick + </span> + </Typography> + </Box> + ) + + const Subtitle = () => ( + <Typography + level='h2' + fontWeight={500} + textAlign={'center'} + className='opacity-70' + data-aos-delay={100 * 5} + data-aos-anchor='[data-aos-id-hero]' + data-aos='zoom-in' + > + Simplify Tasks & Chores, Together. + </Typography> + ) + + const CTAButton = () => ( + <Button + data-aos-delay={100 * 2} + data-aos-anchor='[data-aos-id-hero]' + data-aos='fade-up' + variant='solid' + size='lg' + sx={{ + py: 1.25, + px: 5, + fontSize: 20, + mt: 2, + borderWidth: 3, + // boxShadow: '0px 0px 24px rgba(81, 230, 221, 0.5)', + transition: 'all 0.20s', + }} + className='hover:scale-105' + onClick={() => { + // if the url is donetick.com then navigate to app.donetick.com/my/chores + // else navigate to /my/chores + if (window.location.hostname === 'donetick.com') { + window.location.href = 'https://app.donetick.com/my/chores' + } else { + navigate('/my/chores') + } + }} + > + Get started + </Button> + ) + + return ( + // <Box + // id='hero' + // className='grid min-h-[90vh] w-full place-items-center px-4 py-12' + // data-aos-id-hero + // > + <Grid container spacing={16} sx={{ py: 12 }}> + <Grid item xs={12} md={7}> + <Title /> + <div className='flex flex-col gap-6'> + <Subtitle /> + + <Typography + level='title-lg' + textAlign={'center'} + fontSize={28} + // textColor={'#06b6d4'} + color='primary' + data-aos-delay={100 * 1} + data-aos-anchor='[data-aos-id-hero]' + data-aos='fade-up' + > + {`"${HERO_TEXT_THAT[heroTextIndex % HERO_TEXT_THAT.length]}"`} + </Typography> + + <Box className='flex w-full justify-center'> + <CTAButton /> + <Button + data-aos-delay={100 * 2.5} + data-aos-anchor='[data-aos-id-hero]' + data-aos='fade-up' + variant='soft' + size='lg' + sx={{ + py: 1.25, + px: 5, + ml: 2, + fontSize: 20, + mt: 2, + borderWidth: 3, + // boxShadow: '0px 0px 24px rgba(81, 230, 221, 0.5)', + transition: 'all 0.20s', + }} + className='hover:scale-105' + onClick={() => { + // new window open to https://github.com/Donetick: + window.open('https://github.com/donetick', '_blank') + }} + startDecorator={<GitHub />} + > + Github + </Button> + </Box> + </div> + </Grid> + + <Grid item xs={12} md={5}> + <div className='flex justify-center'> + <img + src={screenShotMyChore} + width={'100%'} + style={{ + maxWidth: 300, + }} + height={'auto'} + alt='Hero img' + data-aos-delay={100 * 2} + data-aos-anchor='[data-aos-id-hero]' + data-aos='fade-left' + /> + </div> + </Grid> + </Grid> + ) +} + +export default HomeHero diff --git a/src/views/Landing/Landing.jsx b/src/views/Landing/Landing.jsx new file mode 100644 index 0000000..2041e42 --- /dev/null +++ b/src/views/Landing/Landing.jsx @@ -0,0 +1,32 @@ +import { Container } from '@mui/joy' +import AOS from 'aos' +import 'aos/dist/aos.css' +import { useEffect, useState } from 'react' +import { useNavigate } from 'react-router-dom' +import FeaturesSection from './FeaturesSection' +import HomeHero from './HomeHero' +import PricingSection from './PricingSection' +const Landing = () => { + const Navigate = useNavigate() + const getCurrentUser = () => { + return JSON.parse(localStorage.getItem('user')) + } + const [users, setUsers] = useState([]) + const [currentUser, setCurrentUser] = useState(getCurrentUser()) + + useEffect(() => { + AOS.init({ + once: false, // whether animation should happen only once - while scrolling down + }) + }, []) + + return ( + <Container className='flex h-full items-center justify-center'> + <HomeHero /> + <FeaturesSection /> + <PricingSection /> + </Container> + ) +} + +export default Landing diff --git a/src/views/Landing/PricingSection.jsx b/src/views/Landing/PricingSection.jsx new file mode 100644 index 0000000..634cf7d --- /dev/null +++ b/src/views/Landing/PricingSection.jsx @@ -0,0 +1,179 @@ +/* eslint-disable react/jsx-key */ +import { CheckRounded } from '@mui/icons-material' +import { Box, Button, Card, Container, Typography } from '@mui/joy' +import React from 'react' +import { useNavigate } from 'react-router-dom' + +const PricingSection = () => { + const navigate = useNavigate() + const FEATURES_FREE = [ + ['Create Tasks and Chores', <CheckRounded color='primary' />], + ['Limited Task History', <CheckRounded color='primary' />], + ['Circle up to two members', <CheckRounded color='primary' />], + ] + const FEATURES_PREMIUM = [ + ['All Basic Features', <CheckRounded color='primary' />], + ['Hosted on DoneTick servers', <CheckRounded color='primary' />], + ['Up to 8 Circle Members', <CheckRounded color='primary' />], + [ + 'Notification through Telegram (Discord coming soon)', + <CheckRounded color='primary' />, + ], + ['Unlimited History', <CheckRounded color='primary' />], + [ + 'All circle members get the same features as the owner', + <CheckRounded color='primary' />, + ], + ] + const FEATURES_YEARLY = [ + // ['All Basic Features', <CheckRounded color='primary' />], + // ['Up to 8 Circle Members', <CheckRounded color='primary' />], + ['Notification through Telegram bot', <CheckRounded color='primary' />], + ['Custom Webhook/API Integration', <CheckRounded color='primary' />], + ['Unlimited History', <CheckRounded color='primary' />], + + ['Priority Support', <CheckRounded color='primary' />], + ] + const PRICEITEMS = [ + { + title: 'Basic', + description: + 'Hosted on Donetick servers, supports up to 2 circle members and includes all the features of the free plan.', + price: 0, + previousPrice: 0, + interval: 'month', + discount: false, + features: FEATURES_FREE, + }, + + { + title: 'Plus', + description: + // 'Supports up to 8 circle members and includes all the features of the Basic plan.', + 'Hosted on Donetick servers, supports up to 8 circle members and includes all the features of the Basic plan.', + price: 30.0, + // previousPrice: 76.89, + interval: 'year', + // discount: true, + features: FEATURES_YEARLY, + }, + ] + return ( + <Container + sx={{ textAlign: 'center', mb: 2 }} + maxWidth={'lg'} + id='pricing-tiers' + > + <Typography level='h4' mt={2} mb={2}> + Pricing + </Typography> + + <Container maxWidth={'sm'} sx={{ mb: 8 }}> + <Typography level='body-md' color='neutral'> + Choose the plan that works best for you. + </Typography> + </Container> + + <div + className='mt-8 grid grid-cols-1 gap-2 sm:grid-cols-1 lg:grid-cols-2' + data-aos-id-pricing + > + {PRICEITEMS.map((pi, index) => ( + <Card + key={index} + data-aos-delay={50 * (1 + index)} + data-aos-anchor='[data-aos-id-pricing]' + data-aos='fade-up' + className='hover:bg-white dark:hover:bg-teal-900' + sx={{ + textAlign: 'center', + p: 5, + minHeight: 400, + // maxWidth: 400, + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + // when top reach the top change the background color: + '&:hover': { + // backgroundColor: '#FFFFFF', + boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.1)', + }, + }} + > + <Box + display='flex' + flexDirection='column' + justifyContent='flex-start' // Updated property + alignItems='center' + > + <Typography level='h2'>{pi.title}</Typography> + <Typography level='body-md'>{pi.description}</Typography> + </Box> + <Box + display='flex' + flexDirection='column' + justifyContent='center' + alignItems='center' + > + <Box + display='flex' + flexDirection='row' + alignItems='baseline' + sx={{ my: 4 }} + > + {pi.discount && ( + <Typography + level='h3' + component='span' + sx={{ textDecoration: 'line-through', opacity: 0.5 }} + > + ${pi.previousPrice} + </Typography> + )} + <Typography level='h2' component='span'> + ${pi.price} + </Typography> + <Typography level='body-md' component='span'> + / {pi.interval} + </Typography> + </Box> + + <Typography level='title-md'>Features</Typography> + {pi.features.map(feature => ( + <Typography + startDecorator={feature[1]} + level='body-md' + color='neutral' + lineHeight={1.6} + > + {feature[0]} + </Typography> + ))} + + {/* Here start the test */} + <div style={{ marginTop: 'auto' }}> + <Button + sx={{ mt: 5 }} + onClick={() => { + navigate('/settings#account') + }} + > + Get Started + </Button> + <Typography + level='body-md' + color='neutral' + lineHeight={1.6} + ></Typography> + </div> + </Box> + </Card> + ))} + </div> + + {/* Here start the test */} + </Container> + ) +} + +export default PricingSection diff --git a/src/views/Modals/Inputs/ConfirmationModal.jsx b/src/views/Modals/Inputs/ConfirmationModal.jsx new file mode 100644 index 0000000..10f9bee --- /dev/null +++ b/src/views/Modals/Inputs/ConfirmationModal.jsx @@ -0,0 +1,43 @@ +import { Box, Button, Modal, ModalDialog, Typography } from '@mui/joy' +import React from 'react' + +function ConfirmationModal({ config }) { + const handleAction = isConfirmed => { + config.onClose(isConfirmed) + } + + return ( + <Modal open={config?.isOpen} onClose={config?.onClose}> + <ModalDialog> + <Typography level='h4' mb={1}> + {config?.title} + </Typography> + + <Typography level='body-md' gutterBottom> + {config?.message} + </Typography> + + <Box display={'flex'} justifyContent={'space-around'} mt={1}> + <Button + onClick={() => { + handleAction(true) + }} + fullWidth + sx={{ mr: 1 }} + > + {config?.confirmText} + </Button> + <Button + onClick={() => { + handleAction(false) + }} + variant='outlined' + > + {config?.cancelText} + </Button> + </Box> + </ModalDialog> + </Modal> + ) +} +export default ConfirmationModal diff --git a/src/views/Modals/Inputs/CreateThingModal.jsx b/src/views/Modals/Inputs/CreateThingModal.jsx new file mode 100644 index 0000000..59263ff --- /dev/null +++ b/src/views/Modals/Inputs/CreateThingModal.jsx @@ -0,0 +1,112 @@ +import { + Box, + Button, + FormLabel, + Input, + Modal, + ModalDialog, + Option, + Select, + Textarea, + Typography, +} from '@mui/joy' +import { useEffect, useState } from 'react' + +function CreateThingModal({ isOpen, onClose, onSave, currentThing }) { + const [name, setName] = useState(currentThing?.name || '') + const [type, setType] = useState(currentThing?.type || 'numeric') + const [state, setState] = useState(currentThing?.state || '') + useEffect(() => { + if (type === 'boolean') { + if (state !== 'true' && state !== 'false') { + setState('false') + } + } else if (type === 'number') { + if (isNaN(state)) { + setState(0) + } + } + }, [type]) + const handleSave = () => { + onSave({ name, type, id: currentThing?.id, state: state || null }) + onClose() + } + + return ( + <Modal open={isOpen} onClose={onClose}> + <ModalDialog> + {/* <ModalClose /> */} + <Typography variant='h4'>P;lease add info</Typography> + <FormLabel>Name</FormLabel> + + <Textarea + placeholder='Thing name' + value={name} + onChange={e => setName(e.target.value)} + sx={{ minWidth: 300 }} + /> + <FormLabel>Type</FormLabel> + <Select value={type} sx={{ minWidth: 300 }}> + {['text', 'number', 'boolean'].map(type => ( + <Option value={type} key={type} onClick={() => setType(type)}> + {type.charAt(0).toUpperCase() + type.slice(1)} + </Option> + ))} + </Select> + + {type === 'text' && ( + <> + <FormLabel>Value</FormLabel> + <Input + placeholder='Thing value' + value={state || ''} + onChange={e => setState(e.target.value)} + sx={{ minWidth: 300 }} + /> + </> + )} + {type === 'number' && ( + <> + <FormLabel>Value</FormLabel> + <Input + placeholder='Thing value' + type='number' + value={state || ''} + onChange={e => { + setState(e.target.value) + }} + sx={{ minWidth: 300 }} + /> + </> + )} + {type === 'boolean' && ( + <> + <FormLabel>Value</FormLabel> + <Select sx={{ minWidth: 300 }} value={state}> + {['true', 'false'].map(value => ( + <Option + value={value} + key={value} + onClick={() => setState(value)} + > + {value.charAt(0).toUpperCase() + value.slice(1)} + </Option> + ))} + </Select> + </> + )} + + <Box display={'flex'} justifyContent={'space-around'} mt={1}> + <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}> + {currentThing?.id ? 'Update' : 'Create'} + </Button> + <Button onClick={onClose} variant='outlined'> + {currentThing?.id ? 'Cancel' : 'Close'} + </Button> + </Box> + </ModalDialog> + </Modal> + ) +} + +export default CreateThingModal diff --git a/src/views/Modals/Inputs/DateModal.jsx b/src/views/Modals/Inputs/DateModal.jsx new file mode 100644 index 0000000..34319c3 --- /dev/null +++ b/src/views/Modals/Inputs/DateModal.jsx @@ -0,0 +1,45 @@ +import React, { useState } from 'react' +import { + Modal, + Button, + Input, + ModalDialog, + ModalClose, + Box, + Typography, +} from '@mui/joy' + +function DateModal({ isOpen, onClose, onSave, current, title }) { + const [date, setDate] = useState( + current ? new Date(current).toISOString().split('T')[0] : null, + ) + + const handleSave = () => { + onSave(date) + onClose() + } + + return ( + <Modal open={isOpen} onClose={onClose}> + <ModalDialog> + {/* <ModalClose /> */} + <Typography variant='h4'>{title}</Typography> + <Input + sx={{ mt: 3 }} + type='date' + value={date} + onChange={e => setDate(e.target.value)} + /> + <Box display={'flex'} justifyContent={'space-around'} mt={1}> + <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}> + Save + </Button> + <Button onClick={onClose} variant='outlined'> + Cancel + </Button> + </Box> + </ModalDialog> + </Modal> + ) +} +export default DateModal diff --git a/src/views/Modals/Inputs/SelectModal.jsx b/src/views/Modals/Inputs/SelectModal.jsx new file mode 100644 index 0000000..61e7ae9 --- /dev/null +++ b/src/views/Modals/Inputs/SelectModal.jsx @@ -0,0 +1,49 @@ +import { + Box, + Button, + Modal, + ModalDialog, + Option, + Select, + Typography, +} from '@mui/joy' +import React from 'react' + +function SelectModal({ isOpen, onClose, onSave, options, title, displayKey }) { + const [selected, setSelected] = React.useState(null) + const handleSave = () => { + onSave(options.find(item => item.id === selected)) + onClose() + } + + return ( + <Modal open={isOpen} onClose={onClose}> + <ModalDialog> + <Typography variant='h4'>{title}</Typography> + <Select> + {options.map((item, index) => ( + <Option + value={item.id} + key={item[displayKey]} + onClick={() => { + setSelected(item.id) + }} + > + {item[displayKey]} + </Option> + ))} + </Select> + + <Box display={'flex'} justifyContent={'space-around'} mt={1}> + <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}> + Save + </Button> + <Button onClick={onClose} variant='outlined'> + Cancel + </Button> + </Box> + </ModalDialog> + </Modal> + ) +} +export default SelectModal diff --git a/src/views/Modals/Inputs/TextModal.jsx b/src/views/Modals/Inputs/TextModal.jsx new file mode 100644 index 0000000..2b44f78 --- /dev/null +++ b/src/views/Modals/Inputs/TextModal.jsx @@ -0,0 +1,46 @@ +import { Box, Button, Modal, ModalDialog, Textarea, Typography } from '@mui/joy' +import { useState } from 'react' + +function TextModal({ + isOpen, + onClose, + onSave, + current, + title, + okText, + cancelText, +}) { + const [text, setText] = useState(current) + + const handleSave = () => { + onSave(text) + onClose() + } + + return ( + <Modal open={isOpen} onClose={onClose}> + <ModalDialog> + {/* <ModalClose /> */} + <Typography variant='h4'>{title}</Typography> + <Textarea + placeholder='Type in here…' + value={text} + onChange={e => setText(e.target.value)} + minRows={2} + maxRows={4} + sx={{ minWidth: 300 }} + /> + + <Box display={'flex'} justifyContent={'space-around'} mt={1}> + <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}> + {okText ? okText : 'Save'} + </Button> + <Button onClick={onClose} variant='outlined'> + {cancelText ? cancelText : 'Cancel'} + </Button> + </Box> + </ModalDialog> + </Modal> + ) +} +export default TextModal diff --git a/src/views/NotificationTargets/EditNotificationTarget.jsx b/src/views/NotificationTargets/EditNotificationTarget.jsx new file mode 100644 index 0000000..ba1a38a --- /dev/null +++ b/src/views/NotificationTargets/EditNotificationTarget.jsx @@ -0,0 +1,51 @@ +import { useEffect, useState } from 'react' +import { useParams } from 'react-router-dom' + +const EditNotificationTarget = () => { + const { id } = useParams() + const [notificationTarget, setNotificationTarget] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + + useEffect(() => { + // const fetchNotificationTarget = async () => { + // try { + // const response = await fetch(`/api/notification-targets/${id}`) + // const data = await response.json() + // setNotificationTarget(data) + // } catch (error) { + // setError(error) + // } finally { + // setLoading(false) + // } + // } + // fetchNotificationTarget() + }, [id]) + + if (loading) { + return <div>Loading...</div> + } + + if (error) { + return <div>Error: {error.message}</div> + } + + return ( + <div> + <h1>Edit Notification Target</h1> + <form> + <label> + Name: + <input type='text' value={notificationTarget.name} /> + </label> + <label> + Email: + <input type='email' value={notificationTarget.email} /> + </label> + <button type='submit'>Save</button> + </form> + </div> + ) +} + +export default EditNotificationTarget diff --git a/src/views/Payments/PaymentFailView.jsx b/src/views/Payments/PaymentFailView.jsx new file mode 100644 index 0000000..38fcc2a --- /dev/null +++ b/src/views/Payments/PaymentFailView.jsx @@ -0,0 +1,51 @@ +import { Box, Container, Sheet, Typography } from '@mui/joy' +import { useEffect } from 'react' +import { useNavigate } from 'react-router-dom' +import Logo from '../../Logo' + +const PaymentCancelledView = () => { + const navigate = useNavigate() + + useEffect(() => { + const timer = setTimeout(() => { + navigate('/my/chores') + }, 5000) + return () => clearTimeout(timer) + }, [navigate]) + + return ( + <Container component='main' maxWidth='xs'> + <Box + sx={{ + marginTop: 4, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }} + > + <Sheet + sx={{ + mt: 1, + width: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: 2, + borderRadius: '8px', + boxShadow: 'md', + }} + > + <Logo /> + <Typography level='h2' sx={{ mt: 2, mb: 1 }}> + Payment has been cancelled + </Typography> + <Typography level='body-md' sx={{ mb: 2 }}> + You will be redirected to the main page shortly. + </Typography> + </Sheet> + </Box> + </Container> + ) +} + +export default PaymentCancelledView diff --git a/src/views/Payments/PaymentSuccessView.jsx b/src/views/Payments/PaymentSuccessView.jsx new file mode 100644 index 0000000..b2fbb50 --- /dev/null +++ b/src/views/Payments/PaymentSuccessView.jsx @@ -0,0 +1,51 @@ +import { Box, Container, Sheet, Typography } from '@mui/joy' +import { useEffect } from 'react' +import { useNavigate } from 'react-router-dom' +import Logo from '../../Logo' + +const PaymentSuccessView = () => { + const navigate = useNavigate() + + useEffect(() => { + const timer = setTimeout(() => { + navigate('/settings') + }, 5000) + return () => clearTimeout(timer) + }, [navigate]) + + return ( + <Container component='main' maxWidth='xs'> + <Box + sx={{ + marginTop: 4, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }} + > + <Sheet + sx={{ + mt: 1, + width: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: 2, + borderRadius: '8px', + boxShadow: 'md', + }} + > + <Logo /> + <Typography level='h2' sx={{ mt: 2, mb: 1 }}> + Payment Successful! + </Typography> + <Typography level='body-md' sx={{ mb: 2 }}> + You will be redirected to the settings page shortly. + </Typography> + </Sheet> + </Box> + </Container> + ) +} + +export default PaymentSuccessView diff --git a/src/views/PrivacyPolicy/PrivacyPolicyView.jsx b/src/views/PrivacyPolicy/PrivacyPolicyView.jsx new file mode 100644 index 0000000..42a4707 --- /dev/null +++ b/src/views/PrivacyPolicy/PrivacyPolicyView.jsx @@ -0,0 +1,102 @@ +import React from 'react' + +const PrivacyPolicyView = () => { + return ( + <div> + <h1>Privacy Policy</h1> + <p> + Favoro LLC ("we," "us," or "our") operates the Donetick application and + website (collectively, the "Service"). This Privacy Policy informs you + of our policies regarding the collection, use, and disclosure of + personal data when you use our Service and the choices you have + associated with that data. + </p> + <h2>Information We Collect</h2> + <p> + <strong>Personal Data:</strong> When you register for an account or use + the Service, we may collect certain personally identifiable information, + such as your name and email address. + </p> + <p> + <strong>Usage Data:</strong> We collect information on how you use the + Service, such as your IP address, browser type, pages visited, and the + time and date of your visit. + </p> + <p> + <strong>Task Data:</strong> We store the tasks and chores you create + within the app, including their details and any assigned users. + </p> + <h2>How We Use Your Information</h2> + <p> + <strong>Provide and Maintain the Service:</strong> We use your + information to operate, maintain, and improve the Service. + </p> + <p> + <strong>Communicate with You:</strong> We may use your email address to + send you notifications, updates, and promotional materials related to + the Service. + </p> + <p> + <strong>Analyze Usage:</strong> We analyze usage data to understand how + the Service is used and to make improvements. + </p> + <h2>How We Share Your Information</h2> + <p> + <strong>With Your Consent:</strong> We will not share your personal data + with third parties without your consent, except as described in this + Privacy Policy. + </p> + <p> + <strong>Service Providers:</strong> We may engage third-party companies + or individuals to perform services on our behalf (e.g., hosting, + analytics). These third parties have access to your personal data only + to perform these tasks and are obligated not to disclose or use it for + any other purpose. + </p> + <p> + <strong>Compliance with Law:</strong> We may disclose your personal data + if required to do so by law or in response to valid requests by public + authorities (e.g., a court or government agency). + </p> + <h2>Security</h2> + <p> + We value your privacy and have implemented reasonable security measures + to protect your personal data from unauthorized access, disclosure, + alteration, or destruction. However, no method of transmission over the + Internet or electronic storage is 100% secure, and we cannot guarantee + absolute security. + </p> + <h2>Your Choices</h2> + <p> + <strong>Account Information:</strong> You can update or correct your + account information at any time. + </p> + <p> + <strong>Marketing Communications:</strong> You can opt out of receiving + promotional emails by following the unsubscribe instructions included in + those emails. + </p> + <h2>Children's Privacy</h2> + <p> + Our Service is not intended for children under 13 years of age. We do + not knowingly collect personal data from children under 13. If you are a + parent or guardian and you are aware that your child has provided us + with personal data, please contact us. + </p> + <h2>Changes to This Privacy Policy</h2> + <p> + We may update our Privacy Policy from time to time. We will notify you + of any changes by posting the new Privacy Policy on this page and + updating the "Effective Date" at the top of this Privacy Policy. + </p> + <h2>Contact Us</h2> + <p> + If you have any questions about this Privacy Policy, please contact us + at: + </p> + <p>Favoro LLC</p> + </div> + ) +} + +export default PrivacyPolicyView diff --git a/src/views/Settings/APITokenSettings.jsx b/src/views/Settings/APITokenSettings.jsx new file mode 100644 index 0000000..5bd9887 --- /dev/null +++ b/src/views/Settings/APITokenSettings.jsx @@ -0,0 +1,130 @@ +import { Box, Button, Card, Chip, Divider, Typography } from '@mui/joy' +import moment from 'moment' +import { useContext, useEffect, useState } from 'react' +import { UserContext } from '../../contexts/UserContext' +import { + CreateLongLiveToken, + DeleteLongLiveToken, + GetLongLiveTokens, +} from '../../utils/Fetcher' +import { isPlusAccount } from '../../utils/Helpers' +import TextModal from '../Modals/Inputs/TextModal' + +const APITokenSettings = () => { + const [tokens, setTokens] = useState([]) + const [isGetTokenNameModalOpen, setIsGetTokenNameModalOpen] = useState(false) + const { userProfile, setUserProfile } = useContext(UserContext) + useEffect(() => { + GetLongLiveTokens().then(resp => { + resp.json().then(data => { + setTokens(data.res) + }) + }) + }, []) + + const handleSaveToken = name => { + CreateLongLiveToken(name).then(resp => { + if (resp.ok) { + resp.json().then(data => { + // add the token to the list: + console.log(data) + const newTokens = [...tokens] + newTokens.push(data.res) + setTokens(newTokens) + }) + } + }) + } + + return ( + <div className='grid gap-4 py-4' id='apitokens'> + <Typography level='h3'>Long Live Token</Typography> + <Divider /> + <Typography level='body-sm'> + Create token to use with the API to update things that trigger task or + chores + </Typography> + {!isPlusAccount(userProfile) && ( + <Chip variant='soft' color='warning'> + Not available in Basic Plan + </Chip> + )} + + {tokens.map(token => ( + <Card key={token.token} className='p-4'> + <Box sx={{ display: 'flex', justifyContent: 'space-between' }}> + <Box> + <Typography level='body-md'>{token.name}</Typography> + <Typography level='body-xs'> + {moment(token.createdAt).fromNow()}( + {moment(token.createdAt).format('lll')}) + </Typography> + </Box> + <Box> + {token.token && ( + <Button + variant='outlined' + color='primary' + sx={{ mr: 1 }} + onClick={() => { + navigator.clipboard.writeText(token.token) + alert('Token copied to clipboard') + }} + > + Copy Token + </Button> + )} + + <Button + variant='outlined' + color='danger' + onClick={() => { + const confirmed = confirm( + `Are you sure you want to remove ${token.name} ?`, + ) + if (confirmed) { + DeleteLongLiveToken(token.id).then(resp => { + if (resp.ok) { + alert('Token removed') + const newTokens = tokens.filter(t => t.id !== token.id) + setTokens(newTokens) + } + }) + } + }} + > + Remove + </Button> + </Box> + </Box> + </Card> + ))} + + <Button + variant='soft' + color='primary' + disabled={!isPlusAccount(userProfile)} + sx={{ + width: '210px', + mb: 1, + }} + onClick={() => { + setIsGetTokenNameModalOpen(true) + }} + > + Generate New Token + </Button> + <TextModal + isOpen={isGetTokenNameModalOpen} + title='Give a name for your new token, something to remember it by.' + onClose={() => { + setIsGetTokenNameModalOpen(false) + }} + okText={'Generate Token'} + onSave={handleSaveToken} + /> + </div> + ) +} + +export default APITokenSettings diff --git a/src/views/Settings/NotificationSetting.jsx b/src/views/Settings/NotificationSetting.jsx new file mode 100644 index 0000000..4ead3b9 --- /dev/null +++ b/src/views/Settings/NotificationSetting.jsx @@ -0,0 +1,90 @@ +import { Button, Divider, Input, Option, Select, Typography } from '@mui/joy' +import { useContext, useEffect, useState } from 'react' +import { UserContext } from '../../contexts/UserContext' +import { GetUserProfile, UpdateUserDetails } from '../../utils/Fetcher' + +const NotificationSetting = () => { + const { userProfile, setUserProfile } = useContext(UserContext) + useEffect(() => { + if (!userProfile) { + GetUserProfile().then(resp => { + resp.json().then(data => { + setUserProfile(data.res) + setChatID(data.res.chatID) + }) + }) + } + }, []) + const [chatID, setChatID] = useState(userProfile?.chatID) + + return ( + <div className='grid gap-4 py-4' id='notifications'> + <Typography level='h3'>Notification Settings</Typography> + <Divider /> + <Typography level='body-md'>Manage your notification settings</Typography> + + <Select defaultValue='telegram' sx={{ maxWidth: '200px' }} disabled> + <Option value='telegram'>Telegram</Option> + <Option value='discord'>Discord</Option> + </Select> + + <Typography level='body-xs'> + You need to initiate a message to the bot in order for the Telegram + notification to work{' '} + <a + style={{ + textDecoration: 'underline', + color: '#0891b2', + }} + href='https://t.me/DonetickBot' + > + Click here + </a>{' '} + to start a chat + </Typography> + + <Input + value={chatID} + onChange={e => setChatID(e.target.value)} + placeholder='User ID / Chat ID' + sx={{ + width: '200px', + }} + /> + <Typography mt={0} level='body-xs'> + If you don't know your Chat ID, start chat with userinfobot and it will + send you your Chat ID.{' '} + <a + style={{ + textDecoration: 'underline', + color: '#0891b2', + }} + href='https://t.me/userinfobot' + > + Click here + </a>{' '} + to start chat with userinfobot{' '} + </Typography> + + <Button + sx={{ + width: '110px', + mb: 1, + }} + onClick={() => { + UpdateUserDetails({ + chatID: Number(chatID), + }).then(resp => { + resp.json().then(data => { + setUserProfile(data) + }) + }) + }} + > + Save + </Button> + </div> + ) +} + +export default NotificationSetting diff --git a/src/views/Settings/Settings.jsx b/src/views/Settings/Settings.jsx new file mode 100644 index 0000000..d612eec --- /dev/null +++ b/src/views/Settings/Settings.jsx @@ -0,0 +1,384 @@ +import { + Box, + Button, + Card, + Chip, + CircularProgress, + Container, + Divider, + Input, + Typography, +} from '@mui/joy' +import moment from 'moment' +import { useContext, useEffect, useState } from 'react' +import { UserContext } from '../../contexts/UserContext' +import Logo from '../../Logo' +import { + AcceptCircleMemberRequest, + CancelSubscription, + DeleteCircleMember, + GetAllCircleMembers, + GetCircleMemberRequests, + GetSubscriptionSession, + GetUserCircle, + GetUserProfile, + JoinCircle, + LeaveCircle, +} from '../../utils/Fetcher' +import APITokenSettings from './APITokenSettings' +import NotificationSetting from './NotificationSetting' +import ThemeToggle from './ThemeToggle' + +const Settings = () => { + const { userProfile, setUserProfile } = useContext(UserContext) + const [userCircles, setUserCircles] = useState([]) + const [circleMemberRequests, setCircleMemberRequests] = useState([]) + const [circleInviteCode, setCircleInviteCode] = useState('') + const [circleMembers, setCircleMembers] = useState([]) + useEffect(() => { + GetUserProfile().then(resp => { + resp.json().then(data => { + setUserProfile(data.res) + }) + }) + GetUserCircle().then(resp => { + resp.json().then(data => { + setUserCircles(data.res ? data.res : []) + }) + }) + GetCircleMemberRequests().then(resp => { + resp.json().then(data => { + setCircleMemberRequests(data.res ? data.res : []) + }) + }) + GetAllCircleMembers() + .then(res => res.json()) + .then(data => { + setCircleMembers(data.res ? data.res : []) + }) + }, []) + + useEffect(() => { + const hash = window.location.hash + if (hash) { + const sharingSection = document.getElementById( + window.location.hash.slice(1), + ) + if (sharingSection) { + sharingSection.scrollIntoView({ behavior: 'smooth' }) + } + } + }, []) + + const getSubscriptionDetails = () => { + if (userProfile?.subscription === 'active') { + return `You are currently subscribed to the Plus plan. Your subscription will renew on ${moment( + userProfile?.expiration, + ).format('MMM DD, YYYY')}.` + } else if (userProfile?.subscription === 'canceled') { + return `You have cancelled your subscription. Your account will be downgraded to the Free plan on ${moment( + userProfile?.expiration, + ).format('MMM DD, YYYY')}.` + } else { + return `You are currently on the Free plan. Upgrade to the Plus plan to unlock more features.` + } + } + const getSubscriptionStatus = () => { + if (userProfile?.subscription === 'active') { + return `Plus` + } else if (userProfile?.subscription === 'canceled') { + if (moment().isBefore(userProfile?.expiration)) { + return `Plus(until ${moment(userProfile?.expiration).format( + 'MMM DD, YYYY', + )})` + } + return `Free` + } else { + return `Free` + } + } + + if (userProfile === null) { + return ( + <Container className='flex h-full items-center justify-center'> + <Box className='flex flex-col items-center justify-center'> + <CircularProgress + color='success' + sx={{ '--CircularProgress-size': '200px' }} + > + <Logo /> + </CircularProgress> + </Box> + </Container> + ) + } + return ( + <Container> + <div className='grid gap-4 py-4' id='sharing'> + <Typography level='h3'>Sharing settings</Typography> + <Divider /> + <Typography level='body-md'> + Your account is automatically connected to a Circle when you create or + join one. Easily invite friends by sharing the unique Circle code or + link below. You'll receive a notification below when someone requests + to join your Circle. + </Typography> + <Typography level='title-sm' mb={-1}> + {userCircles[0]?.userRole === 'member' + ? `You part of ${userCircles[0]?.name} ` + : `You circle code is:`} + + <Input + value={userCircles[0]?.invite_code} + disabled + size='lg' + sx={{ + width: '220px', + mb: 1, + }} + /> + <Button + variant='soft' + onClick={() => { + navigator.clipboard.writeText(userCircles[0]?.invite_code) + alert('Code Copied to clipboard') + }} + > + Copy Code + </Button> + <Button + variant='soft' + sx={{ ml: 1 }} + onClick={() => { + navigator.clipboard.writeText( + window.location.protocol + + '//' + + window.location.host + + `/circle/join?code=${userCircles[0]?.invite_code}`, + ) + alert('Link Copied to clipboard') + }} + > + Copy Link + </Button> + {userCircles.length > 0 && userCircles[0]?.userRole === 'member' && ( + <Button + sx={{ ml: 1 }} + onClick={() => { + const confirmed = confirm( + `Are you sure you want to leave your circle?`, + ) + if (confirmed) { + LeaveCircle(userCircles[0]?.id).then(resp => { + if (resp.ok) { + alert('Left circle successfully.') + } else { + alert('Failed to leave circle.') + } + }) + } + }} + > + Leave Circle + </Button> + )} + </Typography> + <Typography level='title-md'>Circle Members</Typography> + {circleMembers.map(member => ( + <Card key={member.id} className='p-4'> + <Box sx={{ display: 'flex', justifyContent: 'space-between' }}> + <Box> + <Typography level='body-md'> + {member.displayName.charAt(0).toUpperCase() + + member.displayName.slice(1)} + {member.userId === userProfile.id ? '(You)' : ''}{' '} + <Chip> + {' '} + {member.isActive ? member.role : 'Pending Approval'} + </Chip> + </Typography> + {member.isActive ? ( + <Typography level='body-sm'> + Joined on {moment(member.createdAt).format('MMM DD, YYYY')} + </Typography> + ) : ( + <Typography level='body-sm' color='danger'> + Request to join{' '} + {moment(member.updatedAt).format('MMM DD, YYYY')} + </Typography> + )} + </Box> + {member.userId !== userProfile.id && member.isActive && ( + <Button + disabled={ + circleMembers.find(m => userProfile.id == m.userId).role !== + 'admin' + } + variant='outlined' + color='danger' + size='sm' + onClick={() => { + const confirmed = confirm( + `Are you sure you want to remove ${member.displayName} from your circle?`, + ) + if (confirmed) { + DeleteCircleMember(member.circleId, member.userId).then( + resp => { + if (resp.ok) { + alert('Removed member successfully.') + } + }, + ) + } + }} + > + Remove + </Button> + )} + </Box> + </Card> + ))} + + {circleMemberRequests.length > 0 && ( + <Typography level='title-md'>Circle Member Requests</Typography> + )} + {circleMemberRequests.map(request => ( + <Card key={request.id} className='p-4'> + <Typography level='body-md'> + {request.displayName} wants to join your circle. + </Typography> + <Button + variant='soft' + color='success' + onClick={() => { + const confirmed = confirm( + `Are you sure you want to accept ${request.displayName}(username:${request.username}) to join your circle?`, + ) + if (confirmed) { + AcceptCircleMemberRequest(request.id).then(resp => { + if (resp.ok) { + alert('Accepted request successfully.') + // reload the page + window.location.reload() + } + }) + } + }} + > + Accept + </Button> + </Card> + ))} + <Divider> or </Divider> + + <Typography level='body-md'> + if want to join someone else's Circle? Ask them for their unique + Circle code or join link. Enter the code below to join their Circle. + </Typography> + + <Typography level='title-sm' mb={-1}> + Enter Circle code: + <Input + placeholder='Enter code' + value={circleInviteCode} + onChange={e => setCircleInviteCode(e.target.value)} + size='lg' + sx={{ + width: '220px', + mb: 1, + }} + /> + <Button + variant='soft' + onClick={() => { + const confirmed = confirm( + `Are you sure you want to leave you circle and join '${circleInviteCode}'?`, + ) + if (confirmed) { + JoinCircle(circleInviteCode).then(resp => { + if (resp.ok) { + alert( + 'Joined circle successfully, wait for the circle owner to accept your request.', + ) + } + }) + } + }} + > + Join Circle + </Button> + </Typography> + </div> + + <div className='grid gap-4 py-4' id='account'> + <Typography level='h3'>Account Settings</Typography> + <Divider /> + <Typography level='body-md'> + Change your account settings, including your password, display name + </Typography> + <Typography level='title-md' mb={-1}> + Account Type : {getSubscriptionStatus()} + </Typography> + <Typography level='body-sm'>{getSubscriptionDetails()}</Typography> + <Box> + <Button + sx={{ + width: '110px', + mb: 1, + }} + disabled={ + userProfile?.subscription === 'active' || + moment(userProfile?.expiration).isAfter(moment()) + } + onClick={() => { + GetSubscriptionSession().then(data => { + data.json().then(data => { + console.log(data) + window.location.href = data.sessionURL + // open in new window: + // window.open(data.sessionURL, '_blank') + }) + }) + }} + > + Upgrade + </Button> + + {userProfile?.subscription === 'active' && ( + <Button + sx={{ + width: '110px', + mb: 1, + ml: 1, + }} + variant='outlined' + onClick={() => { + CancelSubscription().then(resp => { + if (resp.ok) { + alert('Subscription cancelled.') + window.location.reload() + } + }) + }} + > + Cancel + </Button> + )} + </Box> + </div> + <NotificationSetting /> + <APITokenSettings /> + <div className='grid gap-4 py-4'> + <Typography level='h3'>Theme preferences</Typography> + <Divider /> + <Typography level='body-md'> + Choose how the site looks to you. Select a single theme, or sync with + your system and automatically switch between day and night themes. + </Typography> + <ThemeToggle /> + </div> + </Container> + ) +} + +export default Settings diff --git a/src/views/Settings/Sharing.jsx b/src/views/Settings/Sharing.jsx new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/views/Settings/Sharing.jsx diff --git a/src/views/Settings/SharingSettings.jsx b/src/views/Settings/SharingSettings.jsx new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/views/Settings/SharingSettings.jsx diff --git a/src/views/Settings/ThemeToggle.jsx b/src/views/Settings/ThemeToggle.jsx new file mode 100644 index 0000000..6ff33f1 --- /dev/null +++ b/src/views/Settings/ThemeToggle.jsx @@ -0,0 +1,62 @@ +import useStickyState from '@/hooks/useStickyState' +import { + DarkModeOutlined, + LaptopOutlined, + LightModeOutlined, +} from '@mui/icons-material' +import { + Button, + FormControl, + FormLabel, + ToggleButtonGroup, + useColorScheme, +} from '@mui/joy' + +const ELEMENTID = 'select-theme-mode' + +const ThemeToggle = () => { + const { mode, setMode } = useColorScheme() + const [themeMode, setThemeMode] = useStickyState(mode, 'themeMode') + + const handleThemeModeChange = (_, newThemeMode) => { + if (!newThemeMode) return + setThemeMode(newThemeMode) + setMode(newThemeMode) + } + + const FormThemeModeToggleLabel = () => ( + <FormLabel + level='title-md' + id={`${ELEMENTID}-label`} + htmlFor='select-theme-mode' + > + Theme mode + </FormLabel> + ) + + return ( + <FormControl> + <FormThemeModeToggleLabel /> + <div className='flex items-center gap-4'> + <ToggleButtonGroup + id={ELEMENTID} + variant='outlined' + value={themeMode} + onChange={handleThemeModeChange} + > + <Button startDecorator={<LightModeOutlined />} value='light'> + Light + </Button> + <Button startDecorator={<DarkModeOutlined />} value='dark'> + Dark + </Button> + <Button startDecorator={<LaptopOutlined />} value='system'> + System + </Button> + </ToggleButtonGroup> + </div> + </FormControl> + ) +} + +export default ThemeToggle diff --git a/src/views/SummaryCard.jsx b/src/views/SummaryCard.jsx new file mode 100644 index 0000000..ac1d23a --- /dev/null +++ b/src/views/SummaryCard.jsx @@ -0,0 +1,31 @@ +import { Card, IconButton, Typography } from '@mui/joy' + +const SummaryCard = () => { + return ( + <Card> + <div className='flex justify-between'> + <div> + <Typography level='h2'>Summary</Typography> + <Typography level='body-xs'> + This is a summary of your chores + </Typography> + </div> + <IconButton> + <MoreVert /> + </IconButton> + </div> + <div className='flex justify-between'> + <div> + <Typography level='h3'>Due Today</Typography> + <Typography level='h1'>3</Typography> + </div> + <div> + <Typography level='h3'>Overdue</Typography> + <Typography level='h1'>1</Typography> + </div> + </div> + </Card> + ) +} + +export default SummaryCard diff --git a/src/views/Terms/TermsView.jsx b/src/views/Terms/TermsView.jsx new file mode 100644 index 0000000..f0a0d9c --- /dev/null +++ b/src/views/Terms/TermsView.jsx @@ -0,0 +1,194 @@ +import React from 'react' + +const TermsView = () => { + return ( + <div> + <h1>Terms of Service</h1> + + <p> + These Terms of Service ("Terms") govern your access to and use of the + services provided by Favoro LLC, doing business as donetick.com + ("Favoro", "we", "us", or "our"). By accessing or using our website and + services, you agree to be bound by these Terms. If you do not agree to + these Terms, you may not access or use our services. + </p> + + <h2>Use of Services</h2> + + <ul> + <li> + You must be at least 18 years old or have the legal capacity to enter + into contracts in your jurisdiction to use our services. + </li> + <li> + You are responsible for maintaining the confidentiality of your + account credentials and for any activity that occurs under your + account. + </li> + <li> + You may not use our services for any illegal or unauthorized purpose, + or in any way that violates these Terms. + </li> + </ul> + <h2>Subscriptions</h2> + + <ul> + <li> + Some parts of the Service are billed on a subscription basis + ("Subscription(s)"). You will be billed in advance on a recurring and + periodic basis ("Billing Cycle"). Billing cycles are set either on a + monthly or annual basis, depending on the type of subscription plan + you select when purchasing a Subscription. + </li> + <li> + At the end of each Billing Cycle, your Subscription will automatically + renew under the exact same conditions unless you cancel it or Favoro + cancels it. You may cancel your Subscription renewal either through + your online account management page or by contacting Donetickcustomer + support team. + </li> + <li> + A valid payment method, including credit or debit card, is required to + process the payment for your Subscription. You shall provide Favoro + with accurate and complete billing information including full name, + address, state, zip code, telephone number, and a valid payment method + information. By submitting such payment information, you automatically + authorize Donetickto charge all Subscription fees incurred through + your account to any such payment instruments. + </li> + <li> + Should automatic billing fail to occur for any reason, Donetickwill + issue an electronic invoice indicating that you must proceed manually, + within a certain deadline date, with the full payment corresponding to + the billing period as indicated on the invoice. + </li> + </ul> + + <h2>Fee Changes</h2> + <ul> + <li> + {' '} + Favoro, in its sole discretion and at any time, may modify the + Subscription fees for the Subscriptions. Any Subscription fee change + will become effective at the end of the then-current Billing Cycle. + </li> + <li> + Donetickwill provide you with reasonable prior notice of any change in + Subscription fees to give you an opportunity to terminate your + Subscription before such change becomes effective. + </li> + </ul> + + <h2>Refunds</h2> + <ul> + <li> + Certain refund requests for Subscriptions may be considered by Favoro + on a case-by-case basis and granted at the sole discretion of Favoro. + </li> + </ul> + + <h2>Content</h2> + <ul> + <li> + Our services allow you to post, link, store, share, and otherwise make + available certain information, text, graphics, videos, or other + material ("Content"). + </li> + <li> + You are responsible for the Content that you post to our services, + including its legality, reliability, and appropriateness. + </li> + <li> + You may not post Content that is defamatory, obscene, abusive, + offensive, or otherwise objectionable. + </li> + <li> + You may not post Content that violates any party's intellectual + property rights. + </li> + <li> You may not post Content that violates any law or regulation.</li> + </ul> + <h2>Feedback Requests</h2> + + <p> + Our platform allows users to send feedback requests to others. You are + solely responsible for the content of any feedback requests you send + using our services. + </p> + + <p> + You may not use our services to send spam, harass others, or engage in + any abusive behavior. + </p> + + <h2>Credits</h2> + + <p> + Certain actions on our platform may require credits. You can purchase + credits through our website. + </p> + + <p>Credits are non-refundable and non-transferable.</p> + + <h2>Intellectual Property</h2> + + <p> + All content on our website and services, including text, graphics, + logos, and images, is the property of Donetickor its licensors and is + protected by copyright and other intellectual property laws. + </p> + + <p> + You may not reproduce, modify, or distribute any content from our + website or services without our prior written consent. + </p> + + <h2>Disclaimer of Warranties</h2> + + <p> + Our services are provided "as is" and "as available" without any + warranty of any kind, express or implied. + </p> + + <p> + We do not warrant that our services will be uninterrupted, secure, or + error-free, or that any defects will be corrected. + </p> + + <h2>Limitation of Liability</h2> + + <p> + In no event shall Donetickbe liable for any indirect, incidental, + special, consequential, or punitive damages, including but not limited + to lost profits, arising out of or in connection with your use of our + services. + </p> + + <h2>Governing Law</h2> + + <p> + These Terms shall be governed by and construed in accordance with the + laws of the state of [Your State/Country], without regard to its + conflict of law principles. + </p> + + <h2>Changes to These Terms</h2> + + <p> + We may update these Terms from time to time. Any changes will be posted + on this page, and the revised date will be indicated at the top of the + page. Your continued use of our services after any such changes + constitutes your acceptance of the new Terms. + </p> + + <h2>Contact Us</h2> + + <p> + If you have any questions or concerns about these Terms, please contact + us at support@donetick.com + </p> + </div> + ) +} + +export default TermsView diff --git a/src/views/TestView/IconPicker.jsx b/src/views/TestView/IconPicker.jsx new file mode 100644 index 0000000..d1bf229 --- /dev/null +++ b/src/views/TestView/IconPicker.jsx @@ -0,0 +1,58 @@ +import * as allIcons from '@mui/icons-material' // Import all icons using * as +import { Grid, Input, SvgIcon } from '@mui/joy' +import React, { useEffect, useState } from 'react' + +function MuiIconPicker({ onIconSelect }) { + const [searchTerm, setSearchTerm] = useState('') + const [filteredIcons, setFilteredIcons] = useState([]) + const outlined = Object.keys(allIcons).filter(name => + name.includes('Outlined'), + ) + useEffect(() => { + // Filter icons based on the search term + setFilteredIcons( + outlined.filter(name => + name + .toLowerCase() + .includes(searchTerm ? searchTerm.toLowerCase() : false), + ), + ) + }, [searchTerm]) + + const handleIconClick = iconName => { + onIconSelect(iconName) // Callback for selected icon + } + + return ( + <div> + {/* Autocomplete component for searching */} + {JSON.stringify({ 1: searchTerm, filteredIcons: filteredIcons })} + <Input + onChange={(event, newValue) => { + setSearchTerm(newValue) + }} + /> + {/* Grid to display icons */} + <Grid container spacing={2}> + {filteredIcons.map(iconName => { + const IconComponent = allIcons[iconName] + if (IconComponent) { + // Add this check to prevent errors + return ( + <Grid item key={iconName} xs={3} sm={2} md={1}> + <SvgIcon + component={IconComponent} + onClick={() => handleIconClick(iconName)} + style={{ cursor: 'pointer' }} + /> + </Grid> + ) + } + return null // Return null for non-icon exports + })} + </Grid> + </div> + ) +} + +export default MuiIconPicker diff --git a/src/views/TestView/Test.jsx b/src/views/TestView/Test.jsx new file mode 100644 index 0000000..0494e93 --- /dev/null +++ b/src/views/TestView/Test.jsx @@ -0,0 +1,11 @@ +import MuiIconPicker from './IconPicker' + +const TestView = () => { + return ( + <div> + <MuiIconPicker /> + </div> + ) +} + +export default TestView diff --git a/src/views/Things/ThingsHistory.jsx b/src/views/Things/ThingsHistory.jsx new file mode 100644 index 0000000..39f0e30 --- /dev/null +++ b/src/views/Things/ThingsHistory.jsx @@ -0,0 +1,13 @@ +import { Container, Typography } from '@mui/joy' + +const ThingsHistory = () => { + return ( + <Container maxWidth='md'> + <Typography level='h3' mb={1.5}> + Summary: + </Typography> + </Container> + ) +} + +export default ThingsHistory diff --git a/src/views/Things/ThingsView.jsx b/src/views/Things/ThingsView.jsx new file mode 100644 index 0000000..deb2df5 --- /dev/null +++ b/src/views/Things/ThingsView.jsx @@ -0,0 +1,324 @@ +import { + Add, + Delete, + Edit, + Flip, + PlusOne, + ToggleOff, + ToggleOn, + Widgets, +} from '@mui/icons-material' +import { + Box, + Card, + Chip, + Container, + Grid, + IconButton, + Typography, +} from '@mui/joy' +import { useEffect, useState } from 'react' +import { + CreateThing, + DeleteThing, + GetThings, + SaveThing, + UpdateThingState, +} from '../../utils/Fetcher' +import ConfirmationModal from '../Modals/Inputs/ConfirmationModal' +import CreateThingModal from '../Modals/Inputs/CreateThingModal' + +const ThingCard = ({ + thing, + onEditClick, + onStateChangeRequest, + onDeleteClick, +}) => { + const getThingIcon = type => { + if (type === 'text') { + return <Flip /> + } else if (type === 'number') { + return <PlusOne /> + } else if (type === 'boolean') { + if (thing.state === 'true') { + return <ToggleOn /> + } else { + return <ToggleOff /> + } + } else { + return <ToggleOff /> + } + } + return ( + <Card + variant='outlined' + sx={{ + // display: 'flex', + // flexDirection: 'row', // Change to 'row' + justifyContent: 'space-between', + p: 2, + backgroundColor: 'white', + boxShadow: 'sm', + borderRadius: 8, + mb: 1, + }} + > + <Grid container> + <Grid item xs={9}> + <Box + sx={{ + display: 'flex', + flexDirection: 'row', + gap: 1, + }} + > + <Typography level='title-lg' component='h2'> + {thing?.name} + </Typography> + <Chip level='body-md' component='p'> + {thing?.type} + </Chip> + </Box> + <Box> + <Typography level='body-sm' component='p'> + Current state: + <Chip level='title-md' component='span' size='sm'> + {thing?.state} + </Chip> + </Typography> + </Box> + </Grid> + <Grid item xs={3}> + <Box display='flex' justifyContent='flex-end' alignItems='flex-end'> + {/* <ButtonGroup> */} + <IconButton + variant='solid' + color='success' + onClick={() => { + onStateChangeRequest(thing) + }} + sx={{ + borderRadius: '50%', + width: 50, + height: 50, + zIndex: 1, + }} + > + {getThingIcon(thing?.type)} + </IconButton> + <IconButton + // sx={{ width: 15 }} + variant='soft' + color='success' + onClick={() => { + onEditClick(thing) + }} + sx={{ + borderRadius: '50%', + width: 25, + height: 25, + position: 'relative', + left: -10, + }} + > + <Edit /> + </IconButton> + {/* add delete icon: */} + <IconButton + // sx={{ width: 15 }} + + color='danger' + variant='soft' + onClick={() => { + onDeleteClick(thing) + }} + sx={{ + borderRadius: '50%', + width: 25, + height: 25, + position: 'relative', + left: -10, + }} + > + <Delete /> + </IconButton> + </Box> + </Grid> + </Grid> + </Card> + ) +} + +const ThingsView = () => { + const [things, setThings] = useState([]) + const [isShowCreateThingModal, setIsShowCreateThingModal] = useState(false) + const [createModalThing, setCreateModalThing] = useState(null) + const [confirmModelConfig, setConfirmModelConfig] = useState({}) + useEffect(() => { + // fetch things + GetThings().then(result => { + result.json().then(data => { + setThings(data.res) + }) + }) + }, []) + + const handleSaveThing = thing => { + let saveFunc = CreateThing + if (thing?.id) { + saveFunc = SaveThing + } + saveFunc(thing).then(result => { + result.json().then(data => { + if (thing?.id) { + const currentThings = [...things] + const thingIndex = currentThings.findIndex( + currentThing => currentThing.id === thing.id, + ) + currentThings[thingIndex] = data.res + setThings(currentThings) + } else { + const currentThings = [...things] + currentThings.push(data.res) + setThings(currentThings) + } + }) + }) + } + const handleEditClick = thing => { + setCreateModalThing(thing) + setIsShowCreateThingModal(true) + } + const handleDeleteClick = thing => { + setConfirmModelConfig({ + isOpen: true, + title: 'Delete Things', + confirmText: 'Delete', + cancelText: 'Cancel', + message: 'Are you sure you want to delete this Thing?', + onClose: isConfirmed => { + if (isConfirmed === true) { + DeleteThing(thing.id).then(response => { + if (response.ok) { + const currentThings = [...things] + const thingIndex = currentThings.findIndex( + currentThing => currentThing.id === thing.id, + ) + currentThings.splice(thingIndex, 1) + setThings(currentThings) + } + }) + } + setConfirmModelConfig({}) + }, + }) + } + + const handleStateChangeRequest = thing => { + if (thing?.type === 'text') { + setCreateModalThing(thing) + setIsShowCreateThingModal(true) + } else { + if (thing?.type === 'number') { + thing.state = Number(thing.state) + 1 + } else if (thing?.type === 'boolean') { + if (thing.state === 'true') { + thing.state = 'false' + } else { + thing.state = 'true' + } + } + + UpdateThingState(thing).then(result => { + result.json().then(data => { + const currentThings = [...things] + const thingIndex = currentThings.findIndex( + currentThing => currentThing.id === thing.id, + ) + currentThings[thingIndex] = data.res + setThings(currentThings) + }) + }) + } + } + + return ( + <Container maxWidth='md'> + {things.length === 0 && ( + <Box + sx={{ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'column', + height: '50vh', + }} + > + <Widgets + sx={{ + fontSize: '4rem', + // color: 'text.disabled', + mb: 1, + }} + /> + <Typography level='title-md' gutterBottom> + No things has been created/found + </Typography> + </Box> + )} + {things.map(thing => ( + <ThingCard + key={thing?.id} + thing={thing} + onEditClick={handleEditClick} + onDeleteClick={handleDeleteClick} + onStateChangeRequest={handleStateChangeRequest} + /> + ))} + <Box + // variant='outlined' + sx={{ + position: 'fixed', + bottom: 0, + left: 10, + p: 2, // padding + display: 'flex', + justifyContent: 'flex-end', + gap: 2, + + 'z-index': 1000, + }} + > + <IconButton + color='primary' + variant='solid' + sx={{ + borderRadius: '50%', + width: 50, + height: 50, + }} + // startDecorator={<Add />} + onClick={() => { + setIsShowCreateThingModal(true) + }} + > + <Add /> + </IconButton> + {isShowCreateThingModal && ( + <CreateThingModal + isOpen={isShowCreateThingModal} + onClose={() => { + setIsShowCreateThingModal(false) + setCreateModalThing(null) + }} + onSave={handleSaveThing} + currentThing={createModalThing} + /> + )} + <ConfirmationModal config={confirmModelConfig} /> + </Box> + </Container> + ) +} + +export default ThingsView diff --git a/src/views/components/AutocompleteSelect.jsx b/src/views/components/AutocompleteSelect.jsx new file mode 100644 index 0000000..7708214 --- /dev/null +++ b/src/views/components/AutocompleteSelect.jsx @@ -0,0 +1,87 @@ +import Add from '@mui/icons-material/Add' +import Autocomplete, { createFilterOptions } from '@mui/joy/Autocomplete' +import AutocompleteOption from '@mui/joy/AutocompleteOption' +import FormControl from '@mui/joy/FormControl' +import ListItemDecorator from '@mui/joy/ListItemDecorator' +import * as React from 'react' + +const filter = createFilterOptions() + +export default function FreeSoloCreateOption({ options, onSelectChange }) { + React.useEffect(() => { + setValue(options) + }, [options]) + + const [value, setValue] = React.useState([]) + const [selectOptions, setSelectOptions] = React.useState( + options ? options : [], + ) + return ( + <FormControl id='free-solo-with-text-demo'> + <Autocomplete + value={value} + multiple + size='lg' + on + onChange={(event, newValue) => { + if (typeof newValue === 'string') { + setValue({ + title: newValue, + }) + } else if (newValue && newValue.inputValue) { + // Create a new value from the user input + setValue({ + title: newValue.inputValue, + }) + } else { + setValue(newValue) + } + onSelectChange(newValue) + }} + filterOptions={(options, params) => { + const filtered = filter(options, params) + + const { inputValue } = params + // Suggest the creation of a new value + const isExisting = options.some(option => inputValue === option.title) + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + title: `Add "${inputValue}"`, + }) + } + + return filtered + }} + selectOnFocus + clearOnBlur + handleHomeEndKeys + // freeSolo + options={selectOptions} + getOptionLabel={option => { + // Value selected with enter, right from the input + if (typeof option === 'string') { + return option + } + // Add "xxx" option created dynamically + if (option.inputValue) { + return option.inputValue + } + // Regular option + return option.title + }} + renderOption={(props, option) => ( + <AutocompleteOption {...props}> + {option.title?.startsWith('Add "') && ( + <ListItemDecorator> + <Add /> + </ListItemDecorator> + )} + + {option.title ? option.title : option} + </AutocompleteOption> + )} + /> + </FormControl> + ) +} diff --git a/src/views/components/NavBar.jsx b/src/views/components/NavBar.jsx new file mode 100644 index 0000000..25463b2 --- /dev/null +++ b/src/views/components/NavBar.jsx @@ -0,0 +1,177 @@ +import Logo from '@/assets/logo.svg' +import { + AccountBox, + HomeOutlined, + ListAltRounded, + Logout, + MenuRounded, + Message, + SettingsOutlined, + ShareOutlined, + Widgets, +} from '@mui/icons-material' +import { + Box, + Drawer, + IconButton, + List, + ListItemButton, + ListItemContent, + ListItemDecorator, + Typography, +} from '@mui/joy' +import { useState } from 'react' +import { useLocation } from 'react-router-dom' +import { version } from '../../../package.json' +import NavBarLink from './NavBarLink' +const links = [ + { + to: '/my/chores', + label: 'Home', + icon: <HomeOutlined />, + }, + { + to: '/chores', + label: 'Desktop View', + icon: <ListAltRounded />, + }, + { + to: '/things', + label: 'Things', + icon: <Widgets />, + }, + { + to: '/settings#sharing', + label: 'Sharing', + icon: <ShareOutlined />, + }, + { + to: '/settings#notifications', + label: 'Notifications', + icon: <Message />, + }, + { + to: '/settings#account', + label: 'Account', + icon: <AccountBox />, + }, + { + to: '/settings', + label: 'Settings', + icon: <SettingsOutlined />, + }, +] + +const NavBar = () => { + const [drawerOpen, setDrawerOpen] = useState(false) + const [openDrawer, closeDrawer] = [ + () => setDrawerOpen(true), + () => setDrawerOpen(false), + ] + const location = useLocation() + // if url has /landing then remove the navbar: + if ( + ['/', '/signup', '/login', '/landing', '/forgot-password'].includes( + location.pathname, + ) + ) { + return null + } + + return ( + <nav className='flex gap-2 p-3'> + <IconButton size='sm' variant='plain' onClick={() => setDrawerOpen(true)}> + <MenuRounded /> + </IconButton> + <Box className='flex items-center gap-2'> + <img component='img' src={Logo} width='34' /> + <Typography + level='title-lg' + sx={{ + fontWeight: 700, + fontSize: 24, + }} + > + Done + <span + style={{ + color: '#06b6d4', + fontWeight: 600, + }} + > + tick✓ + </span> + </Typography> + </Box> + <Drawer + open={drawerOpen} + onClose={closeDrawer} + size='sm' + onClick={closeDrawer} + > + <div> + {/* <div className='align-center flex px-5 pt-4'> + <ModalClose size='sm' sx={{ top: 'unset', right: 20 }} /> + </div> */} + <List + // sx={{ p: 2, height: 'min-content' }} + size='md' + onClick={openDrawer} + sx={{ borderRadius: 4, width: '100%', padding: 1 }} + > + {links.map((link, index) => ( + <NavBarLink key={index} link={link} /> + ))} + </List> + </div> + <div> + <List + sx={{ + p: 2, + height: 'min-content', + position: 'absolute', + bottom: 0, + borderRadius: 4, + width: '100%', + padding: 2, + }} + size='md' + onClick={openDrawer} + > + <ListItemButton + onClick={() => { + localStorage.removeItem('ca_token') + localStorage.removeItem('ca_expiration') + // go to login page: + window.location.href = '/login' + }} + sx={{ + py: 1.2, + }} + > + <ListItemDecorator> + <Logout /> + </ListItemDecorator> + <ListItemContent>Logout</ListItemContent> + </ListItemButton> + <Typography + level='body-xs' + sx={{ + // p: 2, + p: 1, + color: 'text.tertiary', + textAlign: 'center', + bottom: 0, + // mb: -2, + }} + > + V{version} + </Typography> + </List> + </div> + </Drawer> + </nav> + ) +} + +export default NavBar diff --git a/src/views/components/NavBarLink.jsx b/src/views/components/NavBarLink.jsx new file mode 100644 index 0000000..3fe10d2 --- /dev/null +++ b/src/views/components/NavBarLink.jsx @@ -0,0 +1,31 @@ +import { + ListItem, + ListItemButton, + ListItemContent, + ListItemDecorator, +} from '@mui/joy' +import { Link } from 'react-router-dom' + +const NavBarLink = ({ link }) => { + const { to, icon, label } = link + return ( + <ListItem> + <ListItemButton + key={to} + component={Link} + to={to} + variant='plain' + color='neutral' + sx={{ + borderRadius: 4, + py: 1.2, + }} + > + <ListItemDecorator>{icon}</ListItemDecorator> + <ListItemContent>{label}</ListItemContent> + </ListItemButton> + </ListItem> + ) +} + +export default NavBarLink diff --git a/src/views/components/NavBarMobile.jsx b/src/views/components/NavBarMobile.jsx new file mode 100644 index 0000000..5fb1100 --- /dev/null +++ b/src/views/components/NavBarMobile.jsx @@ -0,0 +1,107 @@ +import * as React from 'react' +import Box from '@mui/joy/Box' +import ListItemDecorator from '@mui/joy/ListItemDecorator' +import Tabs from '@mui/joy/Tabs' +import TabList from '@mui/joy/TabList' +import Tab, { tabClasses } from '@mui/joy/Tab' +import HomeRoundedIcon from '@mui/icons-material/HomeRounded' +import FavoriteBorder from '@mui/icons-material/FavoriteBorder' +import Search from '@mui/icons-material/Search' +import Person from '@mui/icons-material/Person' + +export default function NavBarMobile() { + const [index, setIndex] = React.useState(0) + const colors = ['primary', 'danger', 'success', 'warning'] + return ( + <Box + sx={{ + position: 'absolute', + width: '100%', + bottom: 0, + + flexGrow: 1, + + p: 1, + borderTopLeftRadius: '12px', + borderTopRightRadius: '12px', + + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + }} + > + <Tabs + size='lg' + aria-label='Bottom Navigation' + value={index} + onChange={(event, value) => setIndex(value)} + sx={theme => ({ + p: 1, + borderRadius: 16, + maxWidth: 500, + // mx: 'auto', + boxShadow: theme.shadow.sm, + '--joy-shadowChannel': theme.vars.palette[colors[index]].darkChannel, + [`& .${tabClasses.root}`]: { + py: 1, + flex: 1, + transition: '0.3s', + fontWeight: 'md', + fontSize: 'md', + [`&:not(.${tabClasses.selected}):not(:hover)`]: { + opacity: 0.7, + }, + }, + })} + > + <TabList + variant='plain' + size='sm' + disableUnderline + sx={{ borderRadius: 'lg', p: 0 }} + > + <Tab + disableIndicator + orientation='vertical' + {...(index === 0 && { color: colors[0] })} + > + <ListItemDecorator> + <HomeRoundedIcon /> + </ListItemDecorator> + Home + </Tab> + <Tab + disableIndicator + orientation='vertical' + {...(index === 1 && { color: colors[1] })} + > + <ListItemDecorator> + <FavoriteBorder /> + </ListItemDecorator> + Likes + </Tab> + <Tab + disableIndicator + orientation='vertical' + {...(index === 2 && { color: colors[2] })} + > + <ListItemDecorator> + <Search /> + </ListItemDecorator> + Search + </Tab> + <Tab + disableIndicator + orientation='vertical' + {...(index === 3 && { color: colors[3] })} + > + <ListItemDecorator> + <Person /> + </ListItemDecorator> + Profile + </Tab> + </TabList> + </Tabs> + </Box> + ) +} |
