alpha(theme.palette.grey[900], 0.8),\n },\n }),\n }}\n >\n \n \n\n \n \n \n {user.name}\n \n \n {user.email}\n \n \n\n \n \n {MENU_OPTIONS.map((option) => (\n \n {option.label}\n \n ))}\n \n \n\n \n \n \n );\n}\n","// ----------------------------------------------------------------------\n\nexport const role = [\n 'UX Designer',\n 'Full Stack Designer',\n 'Backend Developer',\n 'UX Designer',\n 'UX Designer',\n 'Project Manager',\n 'Leader',\n 'Backend Developer',\n 'Project Manager',\n 'UI Designer',\n 'UI/UX Designer',\n 'UI/UX Designer',\n 'UI Designer',\n 'Backend Developer',\n 'Backend Developer',\n 'Front End Developer',\n 'Backend Developer',\n 'Full Stack Designer',\n 'Full Stack Developer',\n 'Backend Developer',\n 'UX Designer',\n 'UI Designer',\n 'Project Manager',\n 'UI/UX Designer',\n 'UI Designer',\n 'Project Manager',\n 'Full Stack Developer',\n 'Hr Manager',\n 'Hr Manager',\n 'UI/UX Designer',\n 'Project Manager',\n 'Full Stack Designer',\n 'UI Designer',\n 'Leader',\n 'Front End Developer',\n 'UI/UX Designer',\n 'Project Manager',\n 'UI/UX Designer',\n 'UI Designer',\n 'Full Stack Designer'\n];\n","// ----------------------------------------------------------------------\n\nexport const email = [\n 'nannie_abernathy70@yahoo.com',\n 'ashlynn_ohara62@gmail.com',\n 'milo.farrell@hotmail.com',\n 'violet.ratke86@yahoo.com',\n 'letha_lubowitz24@yahoo.com',\n 'aditya_greenfelder31@gmail.com',\n 'lenna_bergnaum27@hotmail.com',\n 'luella.ryan33@gmail.com',\n 'joana.simonis84@gmail.com',\n 'marjolaine_white94@gmail.com',\n 'vergie_block82@hotmail.com',\n 'vito.hudson@hotmail.com',\n 'tyrel_greenholt@gmail.com',\n 'dwight.block85@yahoo.com',\n 'mireya13@hotmail.com',\n 'dasia_jenkins@hotmail.com',\n 'benny89@yahoo.com',\n 'dawn.goyette@gmail.com',\n 'zella_hickle4@yahoo.com',\n 'avery43@hotmail.com',\n 'olen_legros@gmail.com',\n 'jimmie.gerhold73@hotmail.com',\n 'genevieve.powlowski@hotmail.com',\n 'louie.kuphal39@gmail.com',\n 'enoch.cruickshank@gmail.com',\n 'arlo_mccullough@gmail.com',\n 'sadie18@yahoo.com',\n 'aric67@gmail.com',\n 'mack_deckow53@gmail.com',\n 'constantin91@yahoo.com',\n 'lonny84@hotmail.com',\n 'gus56@hotmail.com',\n 'brennon64@yahoo.com',\n 'hortense.streich@hotmail.com',\n 'kallie_powlowski57@hotmail.com',\n 'meghan.kemmer@hotmail.com',\n 'bella.mraz14@yahoo.com',\n 'barney88@gmail.com',\n 'diamond_johns@hotmail.com',\n 'gus80@hotmail.com'\n];\n","// ----------------------------------------------------------------------\n\nexport const boolean = [\n true,\n true,\n true,\n false,\n false,\n true,\n false,\n false,\n false,\n false,\n true,\n true,\n true,\n false,\n false,\n false,\n true,\n false,\n false,\n false,\n true,\n false,\n false,\n true,\n true,\n true,\n false,\n false,\n true,\n true,\n false,\n true,\n false,\n true,\n true,\n true,\n false,\n true,\n false,\n false\n];\n","// ----------------------------------------------------------------------\n\nexport const company = [\n 'Lueilwitz and Sons',\n 'Gleichner, Mueller and Tromp',\n 'Nikolaus - Leuschke',\n 'Hegmann, Kreiger and Bayer',\n 'Grimes Inc',\n 'Durgan - Murazik',\n 'Altenwerth, Medhurst and Roberts',\n 'Raynor Group',\n 'Mraz, Donnelly and Collins',\n 'Padberg - Bailey',\n 'Heidenreich, Stokes and Parker',\n 'Pagac and Sons',\n 'Rempel, Hand and Herzog',\n 'Dare - Treutel',\n 'Kihn, Marquardt and Crist',\n 'Nolan - Kunde',\n 'Wuckert Inc',\n 'Dibbert Inc',\n 'Goyette and Sons',\n 'Feest Group',\n 'Bosco and Sons',\n 'Bartell - Kovacek',\n 'Schimmel - Raynor',\n 'Tremblay LLC',\n 'Hills - Mitchell',\n 'Rogahn LLC',\n 'Kuhn, Osinski and Morar',\n 'Schmitt Inc',\n 'Breitenberg - Rosenbaum',\n \"O'Keefe, Schneider and Mraz\",\n 'Rohan, Langworth and Kling',\n 'Morar and Sons',\n 'Mraz LLC',\n 'Rowe, Parisian and Kub',\n 'Marquardt - Hane',\n 'Medhurst Group',\n 'Nikolaus - Lang',\n 'Effertz, Mohr and Olson',\n 'Anderson - Kris',\n 'Runolfsson Group'\n];\n","// ----------------------------------------------------------------------\n\nexport const phoneNumber = [\n '365-374-4961',\n '904-966-2836',\n '399-757-9909',\n '692-767-2903',\n '990-588-5716',\n '955-439-2578',\n '226-924-4058',\n '552-917-1454',\n '285-840-9338',\n '306-269-2446',\n '883-373-6253',\n '476-509-8866',\n '201-465-1954',\n '538-295-9408',\n '531-492-6028',\n '981-699-7588',\n '500-268-4826',\n '205-952-3828',\n '222-255-5190',\n '408-439-8033',\n '272-940-8266',\n '812-685-8057',\n '353-801-5212',\n '606-285-8928',\n '202-767-8621',\n '222-830-0731',\n '964-940-3166',\n '262-702-2396',\n '886-261-9789',\n '352-390-5069',\n '343-907-8334',\n '575-347-2399',\n '749-228-5604',\n '774-452-2071',\n '607-841-0447',\n '395-619-2157',\n '233-834-0373',\n '586-880-2602',\n '746-772-0722',\n '638-615-3365,'\n];\n","// ----------------------------------------------------------------------\n\nexport const fullAddress = [\n '19034 Verna Unions Apt. 164 - Honolulu, RI / 87535',\n '1147 Rohan Drive Suite 819 - Burlington, VT / 82021',\n '18605 Thompson Circle Apt. 086 - Idaho Falls, WV / 50337',\n '110 Lamar Station Apt. 730 - Hagerstown, OK / 49808',\n '36901 Elmer Spurs Apt. 762 - Miramar, DE / 92836',\n '2089 Runolfsson Harbors Suite 886 - Chapel Hill, TX / 32827',\n '279 Karolann Ports Apt. 774 - Prescott Valley, WV / 53905',\n '96607 Claire Square Suite 591 - St. Louis Park, HI / 40802',\n '9388 Auer Station Suite 573 - Honolulu, AK / 98024',\n '47665 Adaline Squares Suite 510 - Blacksburg, NE / 53515',\n '989 Vernice Flats Apt. 183 - Billings, NV / 04147',\n '91020 Wehner Locks Apt. 673 - Albany, WY / 68763',\n '585 Candelario Pass Suite 090 - Columbus, LA / 25376',\n '80988 Renner Crest Apt. 000 - Fargo, VA / 24266',\n '28307 Shayne Pike Suite 523 - North Las Vegas, AZ / 28550',\n '205 Farrell Highway Suite 333 - Rock Hill, OK / 63421',\n '253 Kara Motorway Suite 821 - Manchester, SD / 09331',\n '13663 Kiara Oval Suite 606 - Missoula, AR / 44478',\n '8110 Claire Port Apt. 703 - Anchorage, TN / 01753',\n '4642 Demetris Lane Suite 407 - Edmond, AZ / 60888',\n '74794 Asha Flat Suite 890 - Lancaster, OR / 13466',\n '8135 Keeling Pines Apt. 326 - Alexandria, MA / 89442',\n '441 Gibson Shores Suite 247 - Pasco, NM / 60678',\n '4373 Emelia Valley Suite 596 - Columbia, NM / 42586',\n '1946 Strosin Creek Apt. 279 - Casper, CO / 21335',\n '147 Rempel Center Apt. 305 - Centennial, TN / 09375',\n '78481 Floyd Mountains Apt. 184 - Glendale, SD / 18777',\n '129 Toy Pines Suite 339 - Idaho Falls, CT / 82070',\n '08945 Cremin Underpass Apt. 700 - Iowa City, GA / 33243',\n '20728 Dorcas Highway Suite 959 - Largo, ND / 99931',\n '492 Wilburn Park Apt. 746 - Bellevue, TN / 16077',\n '70530 Garfield Tunnel Suite 902 - Detroit, IA / 01664',\n '868 Kautzer Grove Suite 334 - Kearny, KS / 51368',\n '71189 Towne Forks Suite 519 - Anchorage, IL / 52636',\n '5070 Magdalena Neck Suite 096 - Cedar Rapids, PA / 01342',\n '6216 Jermain Walk Apt. 279 - Wilmington, MA / 55416',\n '1795 Kilback Stravenue Apt. 745 - Concord, MA / 96099',\n '831 Rolfson Expressway Apt. 878 - Norman, NY / 10239',\n '909 Nathaniel Lake Suite 769 - Sherman, NJ / 46523',\n '3690 Hans Ports Apt. 369 - Cary, KS / 48930'\n];\n\nexport const country = [\n 'Kenya',\n 'Madagascar',\n 'Netherlands Antilles',\n 'Azerbaijan',\n 'Aruba',\n 'Comoros',\n 'Sierra Leone',\n 'Bermuda',\n 'Italy',\n 'Iran',\n 'Denmark',\n 'Congo',\n 'Cambodia',\n 'Virgin Islands, British',\n 'Bahamas',\n 'Italy',\n 'France',\n 'Portugal',\n 'Nepal',\n 'Saint Vincent and the Grenadines',\n 'Greenland',\n 'Maldives',\n 'Comoros',\n 'Bhutan',\n 'Tuvalu',\n 'Ethiopia',\n 'Myanmar',\n 'Libyan Arab Jamahiriya',\n 'Senegal',\n 'Malta',\n 'Kyrgyz Republic',\n 'Turks and Caicos Islands',\n 'Gibraltar',\n 'Sweden',\n 'Zambia',\n 'Isle of Man',\n 'Canada',\n 'Turkey',\n 'Samoa',\n 'Vietnam'\n];\n","// ----------------------------------------------------------------------\n\nexport const fullName = [\n 'Jayvion Simon',\n 'Lucian Obrien',\n 'Deja Brady',\n 'Harrison Stein',\n 'Reece Chung',\n 'Lainey Davidson',\n 'Cristopher Cardenas',\n 'Melanie Noble',\n 'Chase Day',\n 'Shawn Manning',\n 'Soren Durham',\n 'Cortez Herring',\n 'Brycen Jimenez',\n 'Giana Brandt',\n 'Aspen Schmitt',\n 'Colten Aguilar',\n 'Angelique Morse',\n 'Selina Boyer',\n 'Lawson Bass',\n 'Ariana Lang',\n 'Amiah Pruitt',\n 'Harold Mcgrath',\n 'Esperanza Mcintyre',\n 'Mireya Conner',\n 'Jamie Kline',\n 'Laney Vazquez',\n 'Tiffany May',\n 'Dexter Shepherd',\n 'Jaqueline Spencer',\n 'Londyn Jarvis',\n 'Yesenia Butler',\n 'Jayvon Hull',\n 'Izayah Pope',\n 'Ayana Hunter',\n 'Isabell Bender',\n 'Desiree Schmidt',\n 'Aidan Stout',\n 'Jace Bush',\n 'Janiya Williamson',\n 'Hudson Alvarez'\n];\n\nexport const firstName = [\n 'Mossie',\n 'David',\n 'Ebba',\n 'Chester',\n 'Eula',\n 'Jaren',\n 'Boyd',\n 'Brady',\n 'Aida',\n 'Anastasia',\n 'Gregoria',\n 'Julianne',\n 'Ila',\n 'Elyssa',\n 'Lucio',\n 'Lewis',\n 'Jacinthe',\n 'Molly',\n 'Brown',\n 'Fritz',\n 'Keon',\n 'Ella',\n 'Ken',\n 'Whitney',\n 'Monte',\n 'Rose',\n 'Shana',\n 'Devon',\n 'Jaleel',\n 'Laury',\n 'Brooks',\n 'Bruce',\n 'Avery',\n 'Esperanza',\n 'Helene',\n 'Heloise',\n 'Elinor',\n 'Adeline',\n 'Haley',\n 'Anabelle'\n];\n\nexport const lastName = [\n 'Carroll',\n 'Simonis',\n 'Yost',\n 'Hand',\n 'Emmerich',\n 'Wilderman',\n 'Howell',\n 'Sporer',\n 'Boehm',\n 'Morar',\n 'Koch',\n 'Reynolds',\n 'Padberg',\n 'Watsica',\n 'Upton',\n 'Yundt',\n 'Pfeffer',\n 'Parker',\n 'Zulauf',\n 'Treutel',\n 'McDermott',\n 'McDermott',\n 'Cruickshank',\n 'Parisian',\n 'Auer',\n 'Turner',\n 'Dooley',\n 'Wiegand',\n 'Abbott',\n 'Wisoky',\n 'Fahey',\n 'Satterfield',\n 'Bahringer',\n 'Schulist',\n 'Durgan',\n 'Carroll',\n 'Jones',\n 'Leffler',\n 'Gutkowski',\n 'Homenick'\n];\n","// ----------------------------------------------------------------------\n\nexport const title = [\n 'Apply These 7 Secret Techniques To Improve Event',\n 'Believing These 7 Myths About Event Keeps You From Growing',\n \"Don't Waste Time! 7 Facts Until You Reach Your Event\",\n 'How 7 Things Will Change The Way You Approach Event',\n \"Event Awards: 7 Reasons Why They Don't Work & What You Can Do About It\",\n \"Event Doesn't Have To Be Hard. Read These 7 Tips\",\n 'Event Is Your Worst Enemy. 7 Ways To Defeat It',\n 'Event On A Budget: 7 Tips From The Great Depression',\n 'Knowing These 7 Secrets Will Make Your Event Look Amazing',\n 'Master The Art Of Event With These 7 Tips',\n 'My Life, My Job, My Career: How 7 Simple Event Helped Me Succeed',\n 'Take Advantage Of Event - Read These 7 Tips',\n 'The Next 7 Things You Should Do For Event Success',\n 'The Time Is Running Out! Think About These 7 Ways To Change Your Event',\n 'The 7 Best Things About Event',\n 'The 7 Biggest Event Mistakes You Can Easily Avoid',\n 'The 7 Most Successful Event Companies In Region',\n 'Think Your Event Is Safe? 7 Ways You Can Lose It Today',\n \"Thinking About Event? 7 Reasons Why It's Time To Stop!\",\n '7 Places To Get Deals On Event',\n 'Best Event Android Apps',\n 'Best Event Tips You Will Read This Year',\n 'Best 30 Tips For Event',\n 'Should Fixing Event Take 30 Steps?',\n 'The A - Z Of Event',\n 'The Next 30 Things To Immediately Do About Event',\n 'The Ultimate Guide To Event',\n 'Top 30 Funny Event Quotes',\n 'Top 30 Quotes On Event',\n 'Top 7 Lessons About Event To Learn Before You Hit 30',\n 'Top 7 Ways To Buy A Used Event',\n '30 Best Ways To Sell Event',\n '30 Ideas For Event',\n '30 Lessons About Event You Need To Learn Before You Hit 40',\n '30 Methods Of Event Domination',\n '30 Things To Do Immediately About Event',\n '30 Tips To Grow Your Event',\n '30 Ways To Avoid Event Burnout',\n '30 Ways To Improve Event',\n 'How To Make More Event By Doing Less'\n];\n\nexport const sentence = [\n 'Assumenda nam repudiandae rerum fugiat vel maxime.',\n 'Quis veniam aut saepe aliquid nulla.',\n 'Reprehenderit ut voluptas sapiente ratione nostrum est.',\n 'Error ut sit vel molestias velit.',\n 'Quo quia sit nihil nemo doloremque et.',\n 'Autem doloribus harum vero laborum.',\n 'Tempora officiis consequuntur architecto nostrum autem nam adipisci.',\n 'Voluptas sunt magni adipisci praesentium saepe.',\n 'Ea architecto quas voluptates voluptas earum illo est vel rem.',\n 'Ipsum expedita reiciendis ut.',\n 'Architecto vel voluptatibus alias a aut non maxime ipsa voluptates.',\n 'Reiciendis enim officiis cupiditate eaque distinctio laudantium modi similique consequatur.',\n 'Ab autem consequatur itaque mollitia ipsum cupiditate error repudiandae nobis.',\n 'Distinctio architecto debitis eligendi consequatur unde id modi accusantium possimus.',\n 'At ut voluptate accusantium.',\n 'Repudiandae ut qui veritatis sint.',\n 'Laboriosam blanditiis quo sed et qui esse ipsam necessitatibus sed.',\n 'Et molestiae et excepturi maxime omnis.',\n 'Sint dolorem quam eum magnam.',\n 'Rerum ut iusto iste quam voluptatem necessitatibus.',\n 'Et quam in.',\n 'Fugit esse tenetur.',\n 'Dolorem dolor porro nihil cupiditate molestiae deserunt ut.',\n 'Omnis beatae eos eius aut molestias laboriosam laborum et optio.',\n 'Ut veniam quam assumenda ut voluptatibus ducimus accusamus.',\n 'Quos dignissimos neque omnis reiciendis voluptatem ducimus.',\n 'Laboriosam quia ut esse.',\n 'Sit reiciendis nihil qui molestias et.',\n 'Facilis cupiditate minima ratione quaerat omnis velit non ex totam.',\n 'Provident sint esse voluptatem voluptas eveniet est.',\n 'Molestias consequatur ea facilis.',\n 'Tempora voluptatibus autem ut ut porro quae delectus dolorum.',\n 'Et consequatur amet nemo ducimus voluptatem placeat voluptas.',\n 'Modi iste atque hic voluptas sit quis deleniti quas consequatur.',\n 'Omnis est aliquid odio mollitia aliquid ex.',\n 'Officia possimus veniam quod molestias.',\n 'Mollitia inventore recusandae provident aut.',\n 'Numquam ullam beatae possimus.',\n 'Fuga velit cupiditate ex culpa odio aut ut.',\n 'Vero corrupti nam voluptatum excepturi est et.'\n];\n\nexport const description = [\n 'Occaecati est et illo quibusdam accusamus qui. Incidunt aut et molestiae ut facere aut. Est quidem iusto praesentium excepturi harum nihil tenetur facilis. Ut omnis voluptates nihil accusantium doloribus eaque debitis.',\n 'Atque eaque ducimus minima distinctio velit. Laborum et veniam officiis. Delectus ex saepe hic id laboriosam officia. Odit nostrum qui illum saepe debitis ullam. Laudantium beatae modi fugit ut. Dolores consequatur beatae nihil voluptates rem maiores.',\n 'Rerum eius velit dolores. Explicabo ad nemo quibusdam. Voluptatem eum suscipit et ipsum et consequatur aperiam quia. Rerum nulla sequi recusandae illum velit quia quas. Et error laborum maiores cupiditate occaecati.',\n 'Et non omnis qui. Qui sunt deserunt dolorem aut velit cumque adipisci aut enim. Nihil quis quisquam nesciunt dicta nobis ab aperiam dolorem repellat. Voluptates non blanditiis. Error et tenetur iste soluta cupiditate ratione perspiciatis et. Quibusdam aliquid nam sunt et quisquam non esse.',\n 'Nihil ea sunt facilis praesentium atque. Ab animi alias sequi molestias aut velit ea. Sed possimus eos. Et est aliquid est voluptatem.',\n 'Non rerum modi. Accusamus voluptatem odit nihil in. Quidem et iusto numquam veniam culpa aperiam odio aut enim. Quae vel dolores. Pariatur est culpa veritatis aut dolorem.',\n 'Est enim et sit non impedit aperiam cumque animi. Aut eius impedit saepe blanditiis. Totam molestias magnam minima fugiat.',\n 'Unde a inventore et. Sed esse ut. Atque ducimus quibusdam fuga quas id qui fuga.',\n 'Eaque natus adipisci soluta nostrum dolorem. Nesciunt ipsum molestias ut aliquid natus ut omnis qui fugiat. Dolor et rem. Ut neque voluptatem blanditiis quasi ullam deleniti.',\n 'Nam et error exercitationem qui voluptate optio. Officia omnis qui accusantium ipsam qui. Quia sequi nulla perspiciatis optio vero omnis maxime omnis ipsum. Perspiciatis consequuntur asperiores veniam dolores.',\n 'Perspiciatis nulla ut ut ut voluptates totam consectetur eligendi qui. Optio ut cum. Dolorum sapiente qui laborum. Impedit temporibus totam delectus nihil. Voluptatem corrupti rem.',\n 'Distinctio omnis similique omnis eos. Repellat cumque rerum nisi. Reiciendis soluta non ut veniam temporibus. Accusantium et dolorem voluptas harum. Nemo eius voluptate dicta et hic nemo. Dolorem assumenda et beatae molestias sit quo mollitia quis consequatur.',\n 'Sed ut mollitia tempore ipsam et illum doloribus ut. Occaecati ratione veritatis explicabo. Omnis nam omnis sunt placeat tempore accusantium placeat distinctio velit.',\n 'Eum illo dicta et perspiciatis ut blanditiis eos sequi. Ea veritatis aut et voluptas aut. Laborum eos quia tempore a culpa.',\n 'Aut quos quae dolores repudiandae similique perferendis perferendis earum laudantium. Facere placeat natus nobis. Eius vitae ullam dolorem.',\n 'Vero dolorem et voluptatem fugit tempore a quam iure. Fuga consequatur corrupti sunt asperiores vitae. Libero totam repellendus animi debitis illum et sunt officia.',\n 'Cupiditate illum officiis id molestiae. Numquam non molestiae aliquid et natus sed hic. Alias quia explicabo sed corrupti sint. Natus in et odio qui unde facilis quia. Est sit eius laboriosam aliquid non aperiam quia quo corporis.',\n 'Et a ab. Optio aspernatur minus tempora amet vitae consectetur inventore cumque. Sed et omnis. Aspernatur a magnam.',\n 'Ipsum omnis et. Quia ea et autem tempore consequuntur veniam dolorem officiis. Ipsa dicta et ut quidem quia doloremque. Sequi vitae doloremque temporibus. Deserunt incidunt id aperiam itaque natus. Earum sit eaque quas incidunt nihil.',\n 'Quae consequatur reiciendis. Consequatur non optio. Eaque id placeat. Commodi quo officia aut repudiandae reiciendis tempore voluptatem et. Ut accusamus qui itaque maxime aliquam. Fugit ut animi molestiae porro maiores.',\n 'Modi hic asperiores ab cumque quam est aut. Voluptas atque quos molestias. Ut excepturi distinctio ipsam aspernatur sit.',\n 'Sunt totam facilis. Quam commodi voluptatem veniam. Tempora deleniti itaque fugit nihil voluptas.',\n 'Ipsam aliquam velit nobis repellendus officiis aut deserunt id et. Nihil sunt aut dolores aut. Dolores est ipsa quia et laborum quidem laborum accusamus id. Facilis odit quod hic laudantium saepe omnis nisi in sint. Sed cupiditate possimus id.',\n 'Magnam non eveniet optio optio ut aliquid atque. Velit libero aspernatur quis laborum consequatur laudantium. Tempora facere optio fugit accusantium ut. Omnis aspernatur reprehenderit autem esse ut ut enim voluptatibus.',\n 'Ipsam vel molestiae dolorem iure molestiae. Ut qui cumque et sint recusandae modi nulla. Vel rerum tempore similique autem enim voluptatem dolores facilis. Qui delectus recusandae magnam.',\n 'Fugiat molestias distinctio enim nobis rerum. Perspiciatis adipisci corrupti quas sed ab sunt nostrum. Quibusdam reiciendis ratione dolores vitae fuga exercitationem asperiores maxime voluptate. Minus et ea delectus quia ullam est. Exercitationem iusto libero. Et aut dolore reprehenderit et saepe sint modi.',\n 'Ex neque aut voluptatem delectus eum deserunt voluptate. Ut quam placeat et. Et impedit tenetur illum aut consequatur quia. Autem sed dolorem non ad aspernatur illum dignissimos beatae. Earum iusto aut rem aut. Facere ea alias enim quo assumenda.',\n 'Quis sint recusandae quasi corporis et fugit. Omnis voluptatum id laborum qui. Assumenda animi quia eum et facere fuga. Ab et sint molestiae et voluptatum nostrum est.',\n 'Est quis numquam recusandae alias porro magni. Incidunt quis aut necessitatibus nam ea dolores cumque. Quis dolorum veniam.',\n 'Corporis magnam non. Ut voluptates pariatur et. Quis tenetur mollitia et necessitatibus et. Perferendis error velit aut.',\n 'Eos ex accusantium possimus aut quae. Omnis dolorum velit. Sapiente quia dolore ea assumenda voluptatem exercitationem sed consequuntur. Eveniet et molestiae ipsa harum quidem soluta quo. Consequatur ad sunt sed numquam odio eveniet.',\n 'Ut sit et provident vero vero voluptatem distinctio. Cumque sit error qui et. Ea architecto ipsum occaecati sed alias eum vel. Officia tempore architecto autem vel veniam. Minus modi commodi ad consequatur similique ut. Tenetur tempore eum.',\n 'Quibusdam in cum voluptatem consequatur rerum. Qui eum assumenda nemo maiores veniam quae. Ipsa occaecati et provident. Quas similique deserunt doloremque placeat natus.',\n 'Voluptates et earum fugiat molestiae distinctio. Aut sapiente quas dolores et. Quo et dolor velit et iure consequatur ut in amet. Repellendus aut sequi animi inventore nesciunt itaque.',\n 'Sit a tempore dicta provident molestiae. Necessitatibus blanditiis voluptatum. Magnam esse animi in qui veritatis quibusdam recusandae adipisci possimus. Tenetur dolores ipsum.',\n 'Neque id sunt amet modi expedita aut libero aut in. Minima dolore praesentium quia quas et pariatur numquam. In ut sequi nemo velit iste minima aliquam. Neque ut tenetur consequuntur sint nemo unde. Magni nesciunt omnis illo optio. Molestias eum exercitationem aut harum odit.',\n 'Modi quia laboriosam qui ad aut. Fugit quisquam earum distinctio officia est fugit quos. Iure repellat distinctio veritatis voluptate amet ratione repudiandae.',\n 'Impedit perferendis vel quis ratione. Id aut id officia. Illum fuga saepe provident voluptate eligendi provident. Et nostrum maxime magni. Nobis cumque id magni in iste earum.',\n 'Dolor numquam maiores praesentium dolorem nihil minus praesentium rem dolorem. Est rerum placeat. Numquam sed magni aliquam laborum enim facere ducimus.',\n 'In sint enim nam et itaque et qui. Molestiae a iusto quidem quia temporibus id quia eaque eius. Quis quia consectetur saepe vero et molestias. Rem minima accusamus vitae adipisci molestiae unde voluptate consequatur molestiae. Rerum exercitationem quisquam vitae.'\n];\n","// ----------------------------------------------------------------------\n\nexport const price = [\n 16.19, 35.71, 34.3, 93.1, 55.47, 89.09, 44.39, 26.92, 45.35, 26.96, 78.22, 35.54, 90.69, 63.61,\n 67.55, 94.75, 75.78, 39.6, 52.84, 72.8, 83.08, 85.02, 69.22, 60.96, 84.7, 16.68, 78.83, 58.07,\n 65.8, 55.69, 87.55, 44.74, 27.42, 84, 76.17, 43.83, 76.39, 17.42, 42.3, 12.45\n];\n\nexport const rating = [\n 2.5, 2, 4.9, 2, 4, 5, 4.9, 5, 3.7, 2.5, 2, 4.9, 4.8, 4, 2, 3.7, 1.4, 2.4, 1.8, 5, 2.9, 3.9, 3.9,\n 1.8, 5, 2.6, 3.1, 3.9, 1.2, 3.2, 4.1, 5, 4.5, 4.1, 2.3, 2.4, 5, 3.1, 4.9, 1.7\n];\n\nexport const age = [\n 52, 43, 56, 25, 22, 53, 38, 50, 55, 37, 16, 27, 55, 41, 52, 32, 34, 52, 31, 53, 23, 48, 43, 41,\n 19, 21, 17, 29, 32, 54, 38, 34, 49, 33, 55, 50, 24, 27, 23, 23\n];\n\nexport const percent = [\n 8.62, 86.36, 73.99, 79, 63.41, 58.79, 12.32, 88.44, 45.06, 91.64, 88.41, 73.08, 39.14, 89.34,\n 43.37, 34.45, 24.04, 80.96, 72.91, 47.59, 2.46, 3.33, 99.31, 47.6, 34.09, 50.61, 66.13, 46.69,\n 92.43, 31.41, 90.85, 36.32, 38.84, 25.6, 87.61, 1.31, 89.32, 41.23, 85.9, 62.63\n];\n","import { sub } from 'date-fns';\n//\nimport { role } from './role';\nimport { email } from './email';\nimport { boolean } from './boolean';\nimport { company } from './company';\nimport { phoneNumber } from './phoneNumber';\nimport { fullAddress, country } from './address';\nimport { firstName, lastName, fullName } from './name';\nimport { title, sentence, description } from './text';\nimport { price, rating, age, percent } from './number';\n\n// ----------------------------------------------------------------------\n\nconst _mock = {\n id: (index) => `e99f09a7-dd88-49d5-b1c8-1daf80c2d7b${index + 1}`,\n email: (index) => email[index],\n phoneNumber: (index) => phoneNumber[index],\n time: (index) => sub(new Date(), { days: index, hours: index }),\n boolean: (index) => boolean[index],\n role: (index) => role[index],\n company: (index) => company[index],\n address: {\n fullAddress: (index) => fullAddress[index],\n country: (index) => country[index],\n },\n name: {\n firstName: (index) => firstName[index],\n lastName: (index) => lastName[index],\n fullName: (index) => fullName[index],\n },\n text: {\n title: (index) => title[index],\n sentence: (index) => sentence[index],\n description: (index) => description[index],\n },\n number: {\n percent: (index) => percent[index],\n rating: (index) => rating[index],\n age: (index) => age[index],\n price: (index) => price[index],\n },\n image: {\n cover: (index) => `https://minimal-assets-api.vercel.app/assets/images/covers/cover_${index + 1}.jpg`,\n feed: (index) => `https://minimal-assets-api.vercel.app/assets/images/feeds/feed_${index + 1}.jpg`,\n product: (index) => `https://minimal-assets-api.vercel.app/assets/images/products/product_${index + 1}.jpg`,\n avatar: (index) => `https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_${index + 1}.jpg`,\n },\n};\n\nexport default _mock;\n","// ----------------------------------------------------------------------\n\nexport function randomNumber(number) {\n return Math.floor(Math.random() * number) + 1;\n}\n\nexport function randomNumberRange(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n}\n\nexport function randomInArray(array) {\n return array[Math.floor(Math.random() * array.length)];\n}\n","import { noCase } from 'change-case';\n// _mock\nimport _mock from './_mock';\nimport { randomNumberRange, randomInArray } from './funcs';\n\n// ----------------------------------------------------------------------\n\nexport const _appRelated = ['Chrome', 'Drive', 'Dropbox', 'Evernote', 'Github'].map((appName, index) => ({\n id: _mock.id(index),\n name: appName,\n system: (index === 2 && 'Windows') || (index === 4 && 'Windows') || 'Mac',\n price: index === 0 || index === 2 || index === 4 ? 0 : _mock.number.price(index),\n rating: _mock.number.rating(index),\n review: randomNumberRange(999, 99999),\n shortcut: `https://minimal-assets-api.vercel.app/assets/icons/ic_${noCase(appName)}.svg`,\n}));\n\nexport const _appInstalled = ['de', 'en', 'fr', 'kr', 'us'].map((country, index) => ({\n id: _mock.id(index),\n name: ['Germany', 'England', 'France', 'Korean', 'USA'][index],\n android: randomNumberRange(999, 99999),\n windows: randomNumberRange(999, 99999),\n apple: randomNumberRange(999, 99999),\n flag: `https://minimal-assets-api.vercel.app/assets/icons/ic_flag_${country}.svg`,\n}));\n\nexport const _appAuthors = [...Array(3)].map((_, index) => ({\n id: _mock.id(index),\n name: _mock.name.fullName(index),\n avatar: _mock.image.avatar(index),\n favourite: randomNumberRange(9999, 19999),\n}));\n\nexport const _appInvoices = [...Array(5)].map((_, index) => ({\n id: `${Date.now() + index}`,\n price: _mock.number.price(index),\n category: randomInArray(['Android', 'Mac', 'Windows']),\n status: randomInArray(['paid', 'out_of_date', 'in_progress']),\n}));\n\nexport const _appFeatured = [...Array(3)].map((_, index) => ({\n id: _mock.id(index),\n title: ['Harry Potter and the Deathly Hallows - Part 2', 'Disney Zombies 2', 'Lightroom mobile - Koloro'][index],\n description: _mock.text.title(index),\n image: _mock.image.feed(index),\n}));\n","import _mock from './_mock';\nimport { randomNumberRange, randomInArray } from './funcs';\n\n// ----------------------------------------------------------------------\n\nexport const _userAbout = {\n id: _mock.id(1),\n cover: _mock.image.cover(1),\n position: 'UI Designer',\n follower: randomNumberRange(999, 99999),\n following: randomNumberRange(999, 99999),\n quote: 'Tart I love sugar plum I love oat cake. Sweet roll caramels I love jujubes. Topping cake wafer..',\n country: _mock.address.country(1),\n email: _mock.email(1),\n company: _mock.company(1),\n school: _mock.company(2),\n role: 'Manager',\n facebookLink: `https://www.facebook.com/caitlyn.kerluke`,\n instagramLink: `https://www.instagram.com/caitlyn.kerluke`,\n linkedinLink: `https://www.linkedin.com/in/caitlyn.kerluke`,\n twitterLink: `https://www.twitter.com/caitlyn.kerluke`,\n};\n\nexport const _userFollowers = [...Array(18)].map((_, index) => ({\n id: _mock.id(index),\n avatarUrl: _mock.image.avatar(index),\n name: _mock.name.fullName(index),\n country: _mock.address.country(index),\n isFollowed: _mock.boolean(index),\n}));\n\nexport const _userFriends = [...Array(18)].map((_, index) => ({\n id: _mock.id(index),\n avatarUrl: _mock.image.avatar(index),\n name: _mock.name.fullName(index),\n role: _mock.role(index),\n}));\n\nexport const _userGallery = [...Array(12)].map((_, index) => ({\n id: _mock.id(index),\n title: _mock.text.title(index),\n postAt: _mock.time(index),\n imageUrl: _mock.image.cover(index),\n}));\n\nexport const _userFeeds = [...Array(3)].map((_, index) => ({\n id: _mock.id(index),\n author: {\n id: _mock.id(8),\n avatarUrl: _mock.image.avatar(1),\n name: 'Caitlyn Kerluke',\n },\n isLiked: true,\n createdAt: _mock.time(index),\n media: _mock.image.feed(index),\n message: _mock.text.sentence(index),\n personLikes: [...Array(36)].map((_, index) => ({\n name: _mock.name.fullName(index),\n avatarUrl: _mock.image.avatar(index + 2),\n })),\n comments: (index === 2 && []) || [\n {\n id: _mock.id(7),\n author: {\n id: _mock.id(8),\n avatarUrl: _mock.image.avatar(randomInArray([2, 3, 4, 5, 6]) || 2),\n name: _mock.name.fullName(index + 5),\n },\n createdAt: _mock.time(2),\n message: 'Praesent venenatis metus at',\n },\n {\n id: _mock.id(9),\n author: {\n id: _mock.id(10),\n avatarUrl: _mock.image.avatar(randomInArray([7, 8, 9, 10, 11]) || 7),\n name: _mock.name.fullName(index + 6),\n },\n createdAt: _mock.time(3),\n message:\n 'Etiam rhoncus. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed lectus.',\n },\n ],\n}));\n\nexport const _userCards = [...Array(24)].map((_, index) => ({\n id: _mock.id(index),\n avatarUrl: _mock.image.avatar(index),\n cover: _mock.image.cover(index),\n name: _mock.name.fullName(index),\n follower: randomNumberRange(999, 99999),\n following: randomNumberRange(999, 99999),\n totalPost: randomNumberRange(999, 99999),\n position: _mock.role(index),\n}));\n\nexport const _userPayment = [...Array(2)].map((_, index) => ({\n id: _mock.id(index),\n cardNumber: ['**** **** **** 1234', '**** **** **** 5678', '**** **** **** 7878'][index],\n cardType: ['master_card', 'visa', 'master_card'][index],\n}));\n\nexport const _userAddressBook = [...Array(4)].map((_, index) => ({\n id: _mock.id(index),\n name: _mock.name.fullName(index),\n phone: _mock.phoneNumber(index),\n country: _mock.address.country(index),\n state: 'New Hampshire',\n city: 'East Sambury',\n street: '41256 Kamille Turnpike',\n zipCode: '85807',\n}));\n\nexport const _userInvoices = [...Array(10)].map((_, index) => ({\n id: _mock.id(index),\n createdAt: _mock.time(index),\n price: _mock.number.price(index),\n}));\n\nexport const _userList = [...Array(24)].map((_, index) => ({\n id: _mock.id(index),\n avatarUrl: _mock.image.avatar(index),\n name: _mock.name.fullName(index),\n email: _mock.email(index),\n phoneNumber: _mock.phoneNumber(index),\n address: '908 Jack Locks',\n country: _mock.address.country(index),\n state: 'Virginia',\n city: 'Rancho Cordova',\n zipCode: '85807',\n company: _mock.company(index),\n isVerified: _mock.boolean(index),\n status: randomInArray(['active', 'banned']),\n role: _mock.role(index),\n}));\n","import { PlanFreeIcon, PlanStarterIcon, PlanPremiumIcon } from '../assets';\n\n// ----------------------------------------------------------------------\n\nconst LICENSES = ['Standard', 'Standard Plus', 'Extended'];\n\nexport const _homePlans = [...Array(3)].map((_, index) => ({\n license: LICENSES[index],\n commons: ['One end products', '12 months updates', '6 months of support'],\n options: [\n 'JavaScript version',\n 'TypeScript version',\n 'Design Resources',\n 'Commercial applications',\n ],\n icons: [\n 'https://minimal-assets-api.vercel.app/assets/images/home/ic_sketch.svg',\n 'https://minimal-assets-api.vercel.app/assets/images/home/ic_figma.svg',\n 'https://minimal-assets-api.vercel.app/assets/images/home/ic_js.svg',\n 'https://minimal-assets-api.vercel.app/assets/images/home/ic_ts.svg',\n ],\n}));\n\nexport const _pricingPlans = [\n {\n subscription: 'basic',\n icon: ,\n price: 0,\n caption: 'forever',\n lists: [\n { text: '3 prototypes', isAvailable: true },\n { text: '3 boards', isAvailable: true },\n { text: 'Up to 5 team members', isAvailable: false },\n { text: 'Advanced security', isAvailable: false },\n { text: 'Permissions & workflows', isAvailable: false },\n ],\n labelAction: 'current plan',\n },\n {\n subscription: 'starter',\n icon: ,\n price: 4.99,\n caption: 'saving $24 a year',\n lists: [\n { text: '3 prototypes', isAvailable: true },\n { text: '3 boards', isAvailable: true },\n { text: 'Up to 5 team members', isAvailable: true },\n { text: 'Advanced security', isAvailable: false },\n { text: 'Permissions & workflows', isAvailable: false },\n ],\n labelAction: 'choose starter',\n },\n {\n subscription: 'premium',\n icon: ,\n price: 9.99,\n caption: 'saving $124 a year',\n lists: [\n { text: '3 prototypes', isAvailable: true },\n { text: '3 boards', isAvailable: true },\n { text: 'Up to 5 team members', isAvailable: true },\n { text: 'Advanced security', isAvailable: true },\n { text: 'Permissions & workflows', isAvailable: true },\n ],\n labelAction: 'choose premium',\n },\n];\n","import _mock from './_mock';\n\n// ----------------------------------------------------------------------\n\nconst COUNTRY = ['de', 'en', 'fr', 'kr', 'us'];\n\nconst CATEGORY = ['CAP', 'Branded Shoes', 'Headphone', 'Cell Phone', 'Earings'];\n\nconst PRODUCT_NAME = [\n 'Small Granite Computer',\n 'Small Rubber Mouse',\n 'Awesome Rubber Hat',\n 'Sleek Cotton Sausages',\n 'Rustic Wooden Chicken',\n];\n\nexport const _ecommerceSalesOverview = [...Array(3)].map((_, index) => ({\n label: ['Total Profit', 'Total Income', 'Total Expenses'][index],\n amount: _mock.number.price(index) * 100,\n value: _mock.number.percent(index),\n}));\n\nexport const _ecommerceBestSalesman = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n name: _mock.name.fullName(index),\n email: _mock.email(index),\n avatar: _mock.image.avatar(index + 8),\n category: CATEGORY[index],\n flag: `https://minimal-assets-api.vercel.app/assets/icons/ic_flag_${COUNTRY[index]}.svg`,\n total: _mock.number.price(index),\n rank: `Top ${index + 1}`,\n}));\n\nexport const _ecommerceLatestProducts = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n name: PRODUCT_NAME[index],\n image: _mock.image.product(index),\n price: _mock.number.price(index),\n priceSale: index === 0 || index === 3 ? 0 : _mock.number.price(index),\n colors: (index === 0 && ['#2EC4B6', '#E71D36', '#FF9F1C', '#011627']) ||\n (index === 1 && ['#92140C', '#FFCF99']) ||\n (index === 2 && ['#0CECDD', '#FFF338', '#FF67E7', '#C400FF', '#52006A', '#046582']) ||\n (index === 3 && ['#845EC2', '#E4007C', '#2A1A5E']) || ['#090088'],\n}));\n\nexport const _ecommerceNewProducts = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n name: [\n 'Nike Air Max 97',\n 'Nike Zoom Gravity',\n 'Nike DBreak-Type',\n 'Kyrie Flytrap 3 EP Basketball Shoe',\n 'Nike Air Max Fusion Men',\n ][index],\n image: _mock.image.product(index),\n}));\n","import _mock from './_mock';\nimport { randomInArray } from './funcs';\n\n// ----------------------------------------------------------------------\n\nexport const _carouselsExample = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n title: _mock.text.title(index),\n image: _mock.image.feed(index),\n description: _mock.text.description(index),\n}));\n\nexport const _carouselsMembers = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n name: _mock.name.fullName(index),\n role: _mock.role(index),\n avatar: `https://minimal-assets-api.vercel.app/assets/images/members/member-${index + 1}.jpg`,\n}));\n\n// ----------------------------------------------------------------------\n\nexport const _invoice = {\n id: `${Date.now()}`,\n taxes: 5,\n discount: 10,\n status: 'paid',\n invoiceFrom: {\n name: _mock.name.fullName(1),\n address: _mock.address.fullAddress(1),\n company: _mock.company(1),\n email: _mock.email(1),\n phone: _mock.phoneNumber(1),\n },\n invoiceTo: {\n name: _mock.name.fullName(2),\n address: _mock.address.fullAddress(2),\n company: _mock.company(2),\n email: _mock.email(2),\n phone: _mock.phoneNumber(2),\n },\n items: [...Array(3)].map((_, index) => ({\n id: _mock.id(index),\n title: _mock.text.title(index),\n description: _mock.text.description(index),\n qty: 5,\n price: _mock.number.price(index),\n })),\n};\n\n// ----------------------------------------------------------------------\n\nexport const _faqs = [...Array(8)].map((_, index) => ({\n id: _mock.id(index),\n value: `panel${index + 1}`,\n heading: `Questions ${index + 1}`,\n detail: _mock.text.description(index),\n}));\n\n// ----------------------------------------------------------------------\n\nexport const _addressBooks = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n receiver: _mock.name.fullName(index),\n fullAddress: _mock.address.fullAddress(index),\n phone: _mock.phoneNumber(index),\n addressType: index === 0 ? 'Home' : 'Office',\n isDefault: index === 0,\n}));\n\n// ----------------------------------------------------------------------\n\nexport const _skills = [...Array(3)].map((_, index) => ({\n label: ['Development', 'Design', 'Marketing'][index],\n value: _mock.number.percent(index),\n}));\n\n// ----------------------------------------------------------------------\n\nexport const _accordions = [...Array(4)].map((_, index) => ({\n id: _mock.id(index),\n value: `panel${index + 1}`,\n heading: `Accordion ${index + 1}`,\n subHeading: _mock.text.title(index),\n detail: _mock.text.description(index),\n}));\n\n// ----------------------------------------------------------------------\n\nexport const _dataGrid = [...Array(36)].map((_, index) => ({\n id: _mock.id(index),\n name: _mock.name.fullName(index),\n email: _mock.email(index),\n lastLogin: _mock.time(index),\n performance: _mock.number.percent(index),\n rating: _mock.number.rating(index),\n status: randomInArray(['online', 'away', 'busy']),\n isAdmin: _mock.boolean(index),\n lastName: _mock.name.lastName(index),\n firstName: _mock.name.firstName(index),\n age: _mock.number.age(index),\n}));\n\n// ----------------------------------------------------------------------\n\nexport const _megaMenuProducts = [...Array(10)].map((_, index) => ({\n name: _mock.text.title(index),\n image: _mock.image.feed(index),\n path: '#',\n}));\n\n// ----------------------------------------------------------------------\n\nexport const _contacts = [...Array(20)].map((_, index) => ({\n id: _mock.id(index),\n name: _mock.name.fullName(index),\n username: _mock.name.fullName(index),\n avatar: _mock.image.avatar(index),\n address: _mock.address.fullAddress(index),\n phone: _mock.phoneNumber(index),\n email: _mock.email(index),\n lastActivity: _mock.time(index),\n status: randomInArray(['online', 'offline', 'away', 'busy']),\n position: _mock.role(index),\n}));\n\n// ----------------------------------------------------------------------\n\nexport const _notifications = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n title: ['Your order is placed', 'Sylvan King', 'You have new message', 'You have new mail', 'Delivery processing'][\n index\n ],\n description: [\n 'waiting for shipping',\n 'answered to your comment on the Minimal',\n '5 unread messages',\n 'sent from Guido Padberg',\n 'Your order is being shipped',\n ][index],\n avatar: [null, _mock.image.avatar(2), null, null, null][index],\n type: ['order_placed', 'friend_interactive', 'chat_message', 'mail', 'order_shipped'][index],\n createdAt: _mock.time(index),\n isUnRead: [true, true, false, false, false][index],\n}));\n\n// ----------------------------------------------------------------------\n\nexport const _mapContact = [\n {\n latlng: [33, 65],\n address: _mock.address.fullAddress(1),\n phoneNumber: _mock.phoneNumber(1),\n },\n {\n latlng: [-12.5, 18.5],\n address: _mock.address.fullAddress(2),\n phoneNumber: _mock.phoneNumber(2),\n },\n];\n","import _mock from './_mock';\nimport { randomInArray } from './funcs';\n\n// ----------------------------------------------------------------------\n\nexport const _bookings = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n name: _mock.name.fullName(index),\n avatar: _mock.image.avatar(index),\n checkIn: _mock.time(index),\n checkOut: _mock.time(index),\n phoneNumber: _mock.phoneNumber(index),\n status: randomInArray(['pending', 'un_paid', 'paid']),\n roomType: randomInArray(['double', 'king', 'single']),\n}));\n\nexport const _bookingsOverview = [...Array(3)].map((_, index) => ({\n status: ['Pending', 'Cancel', 'Done'][index],\n quantity: _mock.number.percent(index) * 1000,\n value: _mock.number.percent(index),\n}));\n\nexport const _bookingReview = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n name: _mock.name.fullName(index),\n description: _mock.text.description(index),\n avatar: _mock.image.avatar(index),\n rating: _mock.number.rating(index),\n postedAt: _mock.time(index),\n tags: ['Great Sevice', 'Recommended', 'Best Price'],\n}));\n\nexport const _bookingNew = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n name: _mock.name.fullName(index),\n avatar: _mock.image.avatar(index),\n bookdAt: _mock.time(index),\n roomNumber: 'A-21',\n roomType: randomInArray(['double', 'king', 'single']),\n person: '3-5',\n cover: `https://minimal-assets-api.vercel.app/assets/images/rooms/room-${index + 1}.jpg`,\n}));\n","import _mock from './_mock';\n\n// ----------------------------------------------------------------------\n\nexport const _bankingContacts = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n name: _mock.name.fullName(index),\n email: _mock.email(index),\n avatar: _mock.image.avatar(index + 4),\n}));\n\nexport const _bankingQuickTransfer = [...Array(12)].map((_, index) => ({\n id: _mock.id(index),\n name: _mock.name.fullName(index),\n email: _mock.email(index),\n avatar: _mock.image.avatar(index),\n}));\n\nexport const _bankingCreditCard = [\n {\n id: _mock.id(2),\n balance: 23432.03,\n cardType: 'mastercard',\n cardHolder: _mock.name.fullName(2),\n cardNumber: '**** **** **** 3640',\n cardValid: '11/22',\n },\n {\n id: _mock.id(3),\n balance: 18000.23,\n cardType: 'visa',\n cardHolder: _mock.name.fullName(3),\n cardNumber: '**** **** **** 8864',\n cardValid: '11/25',\n },\n {\n id: _mock.id(4),\n balance: 2000.89,\n cardType: 'mastercard',\n cardHolder: _mock.name.fullName(4),\n cardNumber: '**** **** **** 7755',\n cardValid: '11/22',\n },\n];\n\nexport const _bankingRecentTransitions = [\n {\n id: _mock.id(2),\n name: _mock.name.fullName(2),\n avatar: _mock.image.avatar(8),\n type: 'Income',\n message: 'Receive money from',\n category: 'Annette Black',\n date: 1627556358365,\n status: 'in_progress',\n amount: 811.45,\n },\n {\n id: _mock.id(3),\n name: _mock.name.fullName(3),\n avatar: _mock.image.avatar(9),\n type: 'Expenses',\n message: 'Payment for',\n category: 'Courtney Henry',\n date: 1627556329038,\n status: 'completed',\n amount: 436.03,\n },\n {\n id: _mock.id(4),\n name: _mock.name.fullName(4),\n avatar: _mock.image.avatar(12),\n type: 'Receive',\n message: 'Payment for',\n category: 'Theresa Webb',\n date: 1627556339677,\n status: 'failed',\n amount: 82.26,\n },\n {\n id: _mock.id(5),\n name: null,\n avatar: null,\n type: 'Expenses',\n message: 'Payment for',\n category: 'Beauty & Health',\n date: 1627547330510,\n status: 'completed',\n amount: 480.73,\n },\n {\n id: _mock.id(6),\n name: null,\n avatar: null,\n type: 'Expenses',\n message: 'Payment for',\n category: 'Books',\n date: 1627556347676,\n status: 'in_progress',\n amount: 11.45,\n },\n];\n","// components\nimport Iconify from '../components/Iconify';\n//\nimport _mock from './_mock';\n\n// ----------------------------------------------------------------------\n\nexport const _analyticPost = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n title: _mock.text.title(index),\n description: _mock.text.description(index),\n image: _mock.image.cover(index),\n postedAt: _mock.time(index),\n}));\n\nexport const _analyticOrderTimeline = [...Array(5)].map((_, index) => ({\n id: _mock.id(index),\n title: [\n '1983, orders, $4220',\n '12 Invoices have been paid',\n 'Order #37745 from September',\n 'New order placed #XF-2356',\n 'New order placed #XF-2346',\n ][index],\n type: `order${index + 1}`,\n time: _mock.time(index),\n}));\n\nexport const _analyticTraffic = [\n {\n name: 'FaceBook',\n value: 323234,\n icon: ,\n },\n {\n name: 'Google',\n value: 341212,\n icon: ,\n },\n {\n name: 'Linkedin',\n value: 411213,\n icon: ,\n },\n {\n name: 'Twitter',\n value: 443232,\n icon: ,\n },\n];\n","import PropTypes from 'prop-types';\n// @mui\nimport { styled } from '@mui/material/styles';\n\n// ----------------------------------------------------------------------\n\nconst RootStyle = styled('span')(({ theme, ownerState }) => {\n const { status, size } = ownerState;\n\n return {\n width: 10,\n height: 10,\n display: 'flex',\n borderRadius: '50%',\n alignItems: 'center',\n justifyContent: 'center',\n '&:before, &:after': {\n content: \"''\",\n borderRadius: 1,\n backgroundColor: theme.palette.common.white\n },\n\n ...(size === 'small' && { width: 8, height: 8 }),\n\n ...(size === 'large' && { width: 12, height: 12 }),\n\n ...(status === 'offline' && { backgroundColor: 'transparent' }),\n\n ...(status === 'away' && {\n backgroundColor: theme.palette.warning.main,\n '&:before': {\n width: 2,\n height: 4,\n transform: 'translateX(1px) translateY(-1px)'\n },\n '&:after': {\n width: 2,\n height: 4,\n transform: 'translateY(1px) rotate(125deg)'\n }\n }),\n\n ...(status === 'busy' && {\n backgroundColor: theme.palette.error.main,\n '&:before': { width: 6, height: 2 }\n }),\n\n ...(status === 'online' && {\n backgroundColor: theme.palette.success.main\n }),\n\n ...(status === 'invisible' && {\n backgroundColor: theme.palette.text.disabled,\n '&:before': {\n width: 6,\n height: 6,\n borderRadius: '50%'\n }\n }),\n\n ...(status === 'unread' && {\n backgroundColor: theme.palette.info.main\n })\n };\n});\n\n// ----------------------------------------------------------------------\n\nBadgeStatus.propTypes = {\n size: PropTypes.oneOf(['small', 'medium', 'large']),\n status: PropTypes.oneOf(['away', 'busy', 'unread', 'online', 'offline', 'invisible'])\n};\n\nexport default function BadgeStatus({ size = 'medium', status = 'offline', ...other }) {\n return ;\n}\n","import { useState, useRef, useEffect } from 'react';\nimport { useSnackbar } from 'notistack';\n\n// @mui\nimport { Button, Dialog, TextField, DialogTitle, DialogContent, DialogActions, DialogContentText } from '@mui/material';\n\n//\nimport { useSelector } from 'react-redux';\nimport * as Yup from 'yup';\nimport { Formik } from 'formik';\n\n// utils\nimport useAuth from '../../../../hooks/useAuth';\nimport useAppData from '../../../../hooks/useAppData';\n\nconst CreateCompanyDialog = ({ showDialog, hideButton, closeCallback }) => {\n const { user } = useAuth();\n const [open, setOpen] = useState(showDialog || false);\n const { enqueueSnackbar } = useSnackbar();\n const { dashboardAPIUrl } = useSelector((state) => state.enviroment);\n const formRef = useRef();\n const { refreshCompanies, updateCurrentCompany, companies, craeteNewCompany } = useAppData();\n const [newCompanyId, setNewCompanyId] = useState(null);\n const [companyName, setCompanyName] = useState('');\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n if (closeCallback) closeCallback();\n setOpen(false);\n refreshCompanies();\n };\n\n const handleFormSubmit = () => {\n if (formRef.current) {\n formRef.current.handleSubmit();\n }\n };\n\n useEffect(() => {\n if (newCompanyId) {\n updateCurrentCompany(newCompanyId);\n\n if (closeCallback) closeCallback();\n }\n }, [companies]);\n\n return (\n \n {!hideButton && (\n \n )}\n\n {\n handleClose();\n }}\n >\n Create\n \n Enter the name of the new company you want to create.\n {\n try {\n const result = await craeteNewCompany(values.name);\n if (result) {\n setSubmitting(false);\n enqueueSnackbar('New company created', { variant: 'success' });\n setNewCompanyId((prev) => result.data);\n handleClose();\n }\n } catch (e) {\n console.error(e);\n }\n }}\n >\n {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (\n \n )}\n \n {`${companyName.length}/60`}\n \n \n \n \n \n \n
\n );\n};\n\nexport default CreateCompanyDialog;\n","import { useState } from 'react';\nimport PropTypes from 'prop-types';\n// @mui\nimport { styled } from '@mui/material/styles';\nimport { Box, Stack, AppBar, Toolbar, Select, MenuItem, Typography, FormControl } from '@mui/material';\n// hooks\nimport useOffSetTop from '../../../hooks/useOffSetTop';\nimport useResponsive from '../../../hooks/useResponsive';\nimport useCollapseDrawer from '../../../hooks/useCollapseDrawer';\nimport useAppData from '../../../hooks/useAppData';\n\n// utils\nimport cssStyles from '../../../utils/cssStyles';\n// config\nimport {\n DASHBOARD_NAVBAR_WIDTH,\n DASHBOARD_HEADER_MOBILE,\n DASHBOARD_HEADER_DESKTOP,\n DASHBOARD_NAVBAR_COLLAPSE_WIDTH,\n} from '../../../config';\n// components\nimport Iconify from '../../../components/Iconify';\nimport { IconButtonAnimate } from '../../../components/animate';\n//\nimport Searchbar from './Searchbar';\nimport AccountPopover from './AccountPopover';\nimport LanguagePopover from './LanguagePopover';\nimport ContactsPopover from './ContactsPopover';\nimport NotificationsPopover from './NotificationsPopover';\nimport CreateCompanyDialog from '../../../sections/@dashboard/general/app/CreateCompanyDialog';\n\n// ----------------------------------------------------------------------\n\nconst RootStyle = styled(AppBar, {\n shouldForwardProp: (prop) => prop !== 'isCollapse',\n})(({ isCollapse, theme }) => ({\n boxShadow: 'none',\n ...cssStyles(theme).bgBlur(),\n transition: theme.transitions.create('width', {\n duration: theme.transitions.duration.shorter,\n }),\n [theme.breakpoints.up('lg')]: {\n width: `calc(100% - ${DASHBOARD_NAVBAR_WIDTH + 1}px)`,\n ...(isCollapse && {\n width: `calc(100% - ${DASHBOARD_NAVBAR_COLLAPSE_WIDTH}px)`,\n }),\n },\n}));\n\nconst ToolbarStyle = styled(Toolbar)(({ theme }) => ({\n minHeight: DASHBOARD_HEADER_MOBILE,\n transition: theme.transitions.create('min-height', {\n easing: theme.transitions.easing.easeInOut,\n duration: theme.transitions.duration.shorter,\n }),\n [theme.breakpoints.up('lg')]: {\n padding: theme.spacing(0, 5),\n minHeight: DASHBOARD_HEADER_DESKTOP,\n },\n}));\n\n// ----------------------------------------------------------------------\n\nDashboardHeader.propTypes = {\n onOpenSidebar: PropTypes.func,\n};\n\nexport default function DashboardHeader({ onOpenSidebar }) {\n const { isCollapse } = useCollapseDrawer();\n const { companies, currentCompany, updateCurrentCompany } = useAppData();\n const [showNewCompanyDialog, setShowNewCompanyDialog] = useState(false);\n const [createCompanyDialog, setCreateCompanyDialog] = useState(null);\n\n const isOffset = useOffSetTop(DASHBOARD_HEADER_DESKTOP);\n\n const isDesktop = useResponsive('up', 'lg');\n\n return (\n <>\n {createCompanyDialog}\n\n \n \n {!isDesktop && (\n \n \n \n )}\n\n {/* */}\n \n \n \n {\n if (e.target.value === '-1') {\n // setShowNewCompanyDialog(true);\n setCreateCompanyDialog(\n {\n setCreateCompanyDialog(null);\n }}\n />\n );\n } else {\n window.location.href = `${window.location.origin}${window.location.pathname}`;\n updateCurrentCompany(e.target.value);\n }\n }}\n >\n {companies &&\n companies.map((company, index) => {\n return (\n \n \n {`${company.company_name}`}\n \n \n {company.company_name.length > 30\n ? `...${company.company_id.substring(\n company.company_id.length / 2 + (company.company_name.length - 30)\n )}`\n : company.company_id}\n \n \n );\n })}\n \n \n \n \n\n \n \n \n \n \n \n );\n}\n","import { useState, useEffect } from 'react';\n\n// ----------------------------------------------------------------------\n\nexport default function useOffSetTop(top) {\n const [offsetTop, setOffSetTop] = useState(false);\n const isTop = top || 100;\n\n useEffect(() => {\n window.onscroll = () => {\n if (window.pageYOffset > isTop) {\n setOffSetTop(true);\n } else {\n setOffSetTop(false);\n }\n };\n return () => {\n window.onscroll = null;\n };\n }, [isTop]);\n\n return offsetTop;\n}\n\n// Usage\n// const offset = useOffSetTop(100);\n","import PropTypes from 'prop-types';\nimport { NavLink as RouterLink } from 'react-router-dom';\n// @mui\nimport { alpha, styled } from '@mui/material/styles';\nimport { Box, Link, ListItemText, ListItemButton, ListItemIcon } from '@mui/material';\n// config\nimport {\n DASHBOARD_NAVBAR_ROOT_ITEM_HEIGHT,\n DASHBOARD_NAVBAR_SUB_ITEM_HEIGHT,\n DASHBOARD_NAVBAR_ICON_ITEM_SIZE,\n} from '../../config';\n// components\nimport Iconify from '../Iconify';\n\n// ----------------------------------------------------------------------\n\nconst ListItemStyle = styled(ListItemButton, {\n shouldForwardProp: (prop) => prop !== 'activeRoot' && prop !== 'activeSub' && prop !== 'subItem',\n})(({ activeRoot, activeSub, subItem, theme }) => ({\n ...theme.typography.body2,\n position: 'relative',\n height: DASHBOARD_NAVBAR_ROOT_ITEM_HEIGHT,\n textTransform: 'capitalize',\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1.5),\n marginBottom: theme.spacing(0.5),\n color: theme.palette.text.secondary,\n borderRadius: theme.shape.borderRadius,\n // activeRoot\n ...(activeRoot && {\n ...theme.typography.subtitle2,\n color: theme.palette.primary.main,\n backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),\n }),\n // activeSub\n ...(activeSub && {\n ...theme.typography.subtitle2,\n color: theme.palette.text.primary,\n }),\n // subItem\n ...(subItem && {\n height: DASHBOARD_NAVBAR_SUB_ITEM_HEIGHT,\n }),\n}));\n\nconst ListItemTextStyle = styled(ListItemText, {\n shouldForwardProp: (prop) => prop !== 'isCollapse',\n})(({ isCollapse, theme }) => ({\n whiteSpace: 'nowrap',\n transition: theme.transitions.create(['width', 'opacity'], {\n duration: theme.transitions.duration.shorter,\n }),\n ...(isCollapse && {\n width: 0,\n opacity: 0,\n }),\n}));\n\nconst ListItemIconStyle = styled(ListItemIcon)({\n width: DASHBOARD_NAVBAR_ICON_ITEM_SIZE,\n height: DASHBOARD_NAVBAR_ICON_ITEM_SIZE,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n '& svg': { width: '100%', height: '100%' },\n});\n\n// ----------------------------------------------------------------------\n\nNavItemRoot.propTypes = {\n active: PropTypes.bool,\n isCollapse: PropTypes.bool,\n item: PropTypes.shape({\n children: PropTypes.array,\n icon: PropTypes.any,\n info: PropTypes.any,\n path: PropTypes.string,\n title: PropTypes.string,\n }),\n onOpen: PropTypes.func,\n open: PropTypes.bool,\n};\n\nconst isExternalLink = (path) => path.includes('http');\n\nexport function NavItemRoot({ item, isCollapse, open = false, active, onOpen }) {\n const { title, path, icon, info, children } = item;\n\n const renderContent = (\n <>\n {icon && {icon}}\n \n {!isCollapse && <>{info && info}}\n \n );\n\n if (children) {\n return (\n \n {renderContent}\n \n );\n }\n\n return isExternalLink(path) ? (\n \n {renderContent}\n \n ) : (\n \n {renderContent}\n \n );\n}\n\n// ----------------------------------------------------------------------\n\nNavItemSub.propTypes = {\n active: PropTypes.bool,\n item: PropTypes.shape({\n children: PropTypes.array,\n info: PropTypes.any,\n path: PropTypes.string,\n title: PropTypes.string,\n }),\n onOpen: PropTypes.func,\n open: PropTypes.bool,\n};\n\nexport function NavItemSub({ item, open = false, active, onOpen }) {\n const { title, path, info, children } = item;\n\n const renderContent = (\n <>\n \n \n {info && info}\n {children && }\n \n );\n\n if (children) {\n return (\n \n {renderContent}\n \n );\n }\n\n return isExternalLink(path) ? (\n \n {renderContent}\n \n ) : (\n \n {renderContent}\n \n );\n}\n\n// ----------------------------------------------------------------------\n\nDotIcon.propTypes = {\n active: PropTypes.bool,\n};\n\nexport function DotIcon({ active }) {\n return (\n \n \n theme.transitions.create('transform', {\n duration: theme.transitions.duration.shorter,\n }),\n ...(active && {\n transform: 'scale(2)',\n bgcolor: 'primary.main',\n }),\n }}\n />\n \n );\n}\n\n// ----------------------------------------------------------------------\n\nArrowIcon.propTypes = {\n open: PropTypes.bool,\n};\n\nexport function ArrowIcon({ open }) {\n return (\n \n );\n}\n","import PropTypes from 'prop-types';\nimport { useState } from 'react';\nimport { matchPath, useLocation } from 'react-router-dom';\n// @mui\nimport { List, Collapse } from '@mui/material';\n//\nimport { NavItemRoot, NavItemSub } from './NavItem';\n\n// ----------------------------------------------------------------------\n\nconst getActive = (path, pathname) => {\n return path ? !!matchPath({ path, end: false }, pathname) : false;\n};\n\nNavListRoot.propTypes = {\n isCollapse: PropTypes.bool,\n list: PropTypes.shape({\n children: PropTypes.array,\n path: PropTypes.string,\n }),\n};\n\nexport function NavListRoot({ list, isCollapse }) {\n const { pathname } = useLocation();\n\n const active = getActive(list.path, pathname);\n\n const [open, setOpen] = useState(active);\n\n const hasChildren = list.children;\n\n if (hasChildren) {\n return (\n <>\n setOpen(!open)} />\n\n {!isCollapse && (\n \n \n {(list.children || []).map((item) => (\n \n ))}\n
\n \n )}\n \n );\n }\n\n return ;\n}\n\n// ----------------------------------------------------------------------\n\nNavListSub.propTypes = {\n list: PropTypes.shape({\n children: PropTypes.array,\n path: PropTypes.string,\n }),\n};\n\nfunction NavListSub({ list }) {\n const { pathname } = useLocation();\n\n const activeRoot = getActive(list.path, pathname);\n\n const [open, setOpen] = useState(activeRoot);\n\n const hasChildren = list.children;\n\n if (hasChildren) {\n return (\n <>\n setOpen(!open)} open={open} active={activeRoot} />\n\n \n \n {(list.children || []).map((item) => (\n \n ))}\n
\n \n \n );\n }\n\n return ;\n}\n","// @mui\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { List, Box, ListSubheader } from '@mui/material';\n//\nimport { NavListRoot } from './NavList';\n\n// ----------------------------------------------------------------------\n\nexport const ListSubheaderStyle = styled((props) => )(\n ({ theme }) => ({\n ...theme.typography.overline,\n paddingTop: theme.spacing(3),\n paddingLeft: theme.spacing(2),\n paddingBottom: theme.spacing(1),\n color: theme.palette.text.primary,\n transition: theme.transitions.create('opacity', {\n duration: theme.transitions.duration.shorter,\n }),\n })\n);\n\n// ----------------------------------------------------------------------\n\nNavSection.propTypes = {\n isCollapse: PropTypes.bool,\n navConfig: PropTypes.array,\n};\n\nexport default function NavSection({ navConfig, isCollapse = false, ...other }) {\n return (\n \n {navConfig.map((group) => (\n \n \n {group.subheader}\n \n\n {group.items.map((list) => (\n \n ))}\n
\n ))}\n \n );\n}\n","import PropTypes from 'prop-types';\nimport { Box } from '@mui/material';\n\n// ----------------------------------------------------------------------\n\nSvgIconStyle.propTypes = {\n src: PropTypes.string.isRequired,\n sx: PropTypes.object,\n};\n\nexport default function SvgIconStyle({ src, sx }) {\n return (\n \n );\n}\n","import { useState } from 'react';\nimport PropTypes from 'prop-types';\n// @mui\nimport { styled } from '@mui/material/styles';\nimport { Avatar, Box, FormControlLabel, Link, Typography, Switch } from '@mui/material';\n\n// Redux\nimport { useDispatch } from 'react-redux';\nimport { switchMode } from '../../../redux/slices/enviroment';\n\n// hooks\nimport useAuth from '../../../hooks/useAuth';\n\n// ----------------------------------------------------------------------\n\nconst RootStyle = styled('div')(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n padding: theme.spacing(2, 2.5),\n borderRadius: Number(theme.shape.borderRadius) * 1.5,\n backgroundColor: theme.palette.grey[500_12],\n transition: theme.transitions.create('opacity', {\n duration: theme.transitions.duration.shorter,\n }),\n}));\n\n// ----------------------------------------------------------------------\n\nNavbarAccount.propTypes = {\n isCollapse: PropTypes.bool,\n};\n\nexport default function NavbarAccount({ isCollapse }) {\n const { user } = useAuth();\n const dispatch = useDispatch();\n const [checkedState, setCheckedState] = useState(localStorage.getItem('env') || 'testnet');\n\n const handleChange = () => {\n if (checkedState === 'testnet') {\n setCheckedState('mainnet');\n dispatch(switchMode());\n localStorage.setItem('env', 'mainnet');\n // window.location.reload();\n } else {\n setCheckedState('testnet');\n\n dispatch(switchMode());\n localStorage.setItem('env', 'testnet');\n // window.location.reload();\n }\n window.location.assign(`${window.location.origin}/${window.location.pathname.split('/')[1]}`);\n };\n\n return (\n \n \n \n\n \n theme.transitions.create('width', {\n duration: theme.transitions.duration.shorter,\n }),\n ...(isCollapse && {\n ml: 0,\n width: 0,\n }),\n }}\n >\n \n {user.name}\n \n \n {user.role}\n \n\n }\n label={checkedState === 'testnet' ? 'On Testnet' : 'On Mainnet'}\n />\n \n \n \n );\n}\n","// @mui\nimport { Stack, Button, Typography } from '@mui/material';\n// assets\nimport { DocIllustration } from '../../../assets';\n\n// ----------------------------------------------------------------------\n\nexport default function NavbarDocs() {\n return (\n \n \n\n \n \n Need help?\n
Please check our docs\n \n
\n\n {\n window.open('https://docs.graffle.io', '_blank');\n }}\n >\n Documentation\n \n \n );\n}\n","// @mui\nimport PropTypes from 'prop-types';\nimport { Box } from '@mui/material';\n// components\nimport { IconButtonAnimate } from '../../../components/animate';\n\n// ----------------------------------------------------------------------\n\nCollapseButton.propTypes = {\n collapseClick: PropTypes.bool,\n onToggleCollapse: PropTypes.func,\n};\n\nexport default function CollapseButton({ onToggleCollapse, collapseClick }) {\n return (\n \n \n theme.transitions.create('transform', {\n duration: theme.transitions.duration.shorter,\n }),\n ...(collapseClick && {\n transform: 'rotate(180deg)',\n }),\n }}\n >\n {icon}\n \n \n );\n}\n\n// ----------------------------------------------------------------------\n\nconst icon = (\n \n);\n","import SettingsIcon from '@mui/icons-material/Settings';\nimport EventNoteIcon from '@mui/icons-material/EventNote';\n\n// routes\nimport { PATH_DASHBOARD } from '../../../routes/paths';\n\n// components\nimport SvgIconStyle from '../../../components/SvgIconStyle';\n\n// ----------------------------------------------------------------------\n\nconst getIcon = (name) => ;\n\nconst ICONS = {\n user: getIcon('ic_user'),\n ecommerce: getIcon('ic_ecommerce'),\n analytics: getIcon('ic_analytics'),\n dashboard: getIcon('ic_dashboard'),\n projects: ,\n events: ,\n};\n\nconst sidebarConfig = [\n // GENERAL\n // ----------------------------------------------------------------------\n {\n subheader: 'App',\n items: [\n {\n title: 'Dashboard',\n path: PATH_DASHBOARD.general.app,\n icon: ICONS.dashboard,\n },\n {\n title: 'Projects',\n path: PATH_DASHBOARD.projects.root,\n icon: ICONS.projects,\n },\n {\n title: 'Webhook Logs',\n path: PATH_DASHBOARD.webhooklogs.root,\n icon: ICONS.events,\n },\n // {\n // title: 'Analytics',\n // path: PATH_DASHBOARD.analytics.root,\n // icon: ICONS.events,\n // },\n ],\n },\n];\n\nexport default sidebarConfig;\n","import PropTypes from 'prop-types';\nimport { useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\n// @mui\nimport SettingsIcon from '@mui/icons-material/Settings';\nimport EventNoteIcon from '@mui/icons-material/EventNote';\nimport BusinessIcon from '@mui/icons-material/Business';\nimport { styled, useTheme } from '@mui/material/styles';\nimport { Box, Stack, Drawer, Typography } from '@mui/material';\n// routes\nimport { PATH_DASHBOARD } from '../../../routes/paths';\n// hooks\nimport useResponsive from '../../../hooks/useResponsive';\nimport useCollapseDrawer from '../../../hooks/useCollapseDrawer';\nimport useAppData from '../../../hooks/useAppData';\n// utils\nimport cssStyles from '../../../utils/cssStyles';\n// config\nimport { DASHBOARD_NAVBAR_WIDTH, DASHBOARD_NAVBAR_COLLAPSE_WIDTH } from '../../../config';\n// components\nimport Logo from '../../../components/Logo';\nimport Scrollbar from '../../../components/Scrollbar';\nimport NavSection from '../../../components/nav-section';\nimport SvgIconStyle from '../../../components/SvgIconStyle';\n//\nimport NavbarAccount from './NavbarAccount';\nimport NavbarDocs from './NavbarDocs';\nimport CollapseButton from './CollapseButton';\nimport navConfig from './NavConfig';\n\n// ----------------------------------------------------------------------\n\nconst getIcon = (name) => ;\n\nconst ICONS = {\n user: getIcon('ic_user'),\n ecommerce: getIcon('ic_ecommerce'),\n analytics: getIcon('ic_analytics'),\n dashboard: getIcon('ic_dashboard'),\n projects: ,\n events: ,\n company: ,\n};\n\nconst RootStyle = styled('div')(({ theme }) => ({\n [theme.breakpoints.up('lg')]: {\n flexShrink: 0,\n transition: theme.transitions.create('width', {\n duration: theme.transitions.duration.shorter,\n }),\n },\n}));\n\n// ----------------------------------------------------------------------\n\nDashboardNavbar.propTypes = {\n isOpenSidebar: PropTypes.bool,\n onCloseSidebar: PropTypes.func,\n};\n\nexport default function DashboardNavbar({ isOpenSidebar, onCloseSidebar }) {\n const theme = useTheme();\n const { companies, currentCompany } = useAppData();\n const { pathname } = useLocation();\n const [links, setLinks] = useState([]);\n\n const isDesktop = useResponsive('up', 'lg');\n\n const { isCollapse, collapseClick, collapseHover, onToggleCollapse, onHoverEnter, onHoverLeave } =\n useCollapseDrawer();\n\n useEffect(() => {\n if (isOpenSidebar) {\n onCloseSidebar();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [pathname]);\n\n useEffect(() => {\n if (currentCompany.length > 0 && companies.find((company) => company.company_id === currentCompany) !== undefined) {\n if (\n companies &&\n companies.length > 0 &&\n companies.find((company) => company.company_id === currentCompany).role > 2\n ) {\n const adminLinks = [\n {\n ...navConfig[0],\n items: [\n ...navConfig[0].items,\n {\n title: 'Company',\n path: PATH_DASHBOARD.company.root,\n icon: ICONS.company,\n },\n ],\n },\n ];\n\n setLinks(adminLinks);\n } else {\n setLinks(navConfig);\n }\n }\n }, [currentCompany, companies]);\n\n const renderContent = (\n \n \n \n \n\n {/* {isDesktop && !isCollapse && (\n \n )} */}\n \n\n \n \n\n \n\n \n\n {!isCollapse && }\n\n \n v2.11.1\n \n \n );\n\n return (\n \n {!isDesktop && (\n \n {renderContent}\n \n )}\n\n {isDesktop && (\n \n theme.transitions.create('width', {\n duration: theme.transitions.duration.standard,\n }),\n ...(isCollapse && {\n width: DASHBOARD_NAVBAR_COLLAPSE_WIDTH,\n }),\n ...(collapseHover && {\n ...cssStyles(theme).bgBlur(),\n boxShadow: (theme) => theme.customShadows.z24,\n }),\n },\n }}\n >\n {renderContent}\n \n )}\n \n );\n}\n","import { useState } from 'react';\nimport { Outlet } from 'react-router-dom';\n// @mui\nimport { styled } from '@mui/material/styles';\n// hooks\nimport useCollapseDrawer from '../../hooks/useCollapseDrawer';\n// config\nimport {\n DASHBOARD_NAVBAR_WIDTH,\n DASHBOARD_HEADER_MOBILE,\n DASHBOARD_HEADER_DESKTOP,\n DASHBOARD_NAVBAR_COLLAPSE_WIDTH\n} from '../../config';\n//\nimport DashboardHeader from './header';\nimport DashboardNavbar from './navbar';\n\n// ----------------------------------------------------------------------\n\nconst RootStyle = styled('div')(({ theme }) => ({\n [theme.breakpoints.up('lg')]: {\n display: 'flex',\n minHeight: '100%'\n }\n}));\n\nconst MainStyle = styled('main', {\n shouldForwardProp: (prop) => prop !== 'collapseClick'\n})(({ collapseClick, theme }) => ({\n flexGrow: 1,\n paddingTop: DASHBOARD_HEADER_MOBILE + 24,\n paddingBottom: DASHBOARD_HEADER_MOBILE + 24,\n [theme.breakpoints.up('lg')]: {\n paddingLeft: 16,\n paddingRight: 16,\n paddingTop: DASHBOARD_HEADER_DESKTOP + 24,\n paddingBottom: DASHBOARD_HEADER_DESKTOP + 24,\n width: `calc(100% - ${DASHBOARD_NAVBAR_WIDTH}px)`,\n transition: theme.transitions.create('margin-left', {\n duration: theme.transitions.duration.shorter\n }),\n ...(collapseClick && {\n marginLeft: DASHBOARD_NAVBAR_COLLAPSE_WIDTH\n })\n }\n}));\n\n// ----------------------------------------------------------------------\n\nexport default function DashboardLayout() {\n const { collapseClick } = useCollapseDrawer();\n\n const [open, setOpen] = useState(false);\n\n return (\n \n setOpen(true)} />\n\n setOpen(false)} />\n\n \n \n \n \n );\n}\n","import NProgress from 'nprogress';\nimport { useEffect, useMemo } from 'react';\n// @mui\nimport { useTheme } from '@mui/material/styles';\nimport { GlobalStyles } from '@mui/material';\n\n// ----------------------------------------------------------------------\n\nexport function ProgressBarStyle() {\n const theme = useTheme();\n\n return (\n \n );\n}\n\nexport default function ProgressBar() {\n NProgress.configure({\n showSpinner: false\n });\n\n useMemo(() => {\n NProgress.start();\n }, []);\n\n useEffect(() => {\n NProgress.done();\n }, []);\n\n return null;\n}\n","import PropTypes from 'prop-types';\nimport { m } from 'framer-motion';\n// @mui\nimport { alpha, styled } from '@mui/material/styles';\nimport { Box } from '@mui/material';\n//\nimport Logo from './Logo';\nimport ProgressBar from './ProgressBar';\n\n// ----------------------------------------------------------------------\n\nconst RootStyle = styled('div')(({ theme }) => ({\n right: 0,\n bottom: 0,\n zIndex: 99999,\n width: '100%',\n height: '100%',\n position: 'fixed',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.background.default,\n}));\n\n// ----------------------------------------------------------------------\n\nLoadingScreen.propTypes = {\n isDashboard: PropTypes.bool,\n};\n\nexport default function LoadingScreen({ isDashboard, ...other }) {\n return (\n <>\n \n\n {!isDashboard && (\n \n \n \n \n\n `solid 3px ${alpha(theme.palette.primary.dark, 0.24)}`,\n }}\n />\n\n `solid 8px ${alpha(theme.palette.primary.dark, 0.24)}`,\n }}\n />\n \n )}\n \n );\n}\n","import PropTypes from 'prop-types';\nimport { Navigate, useNavigate } from 'react-router-dom';\n// hooks\nimport useAuth from '../hooks/useAuth';\n// routes\nimport { PATH_DASHBOARD } from '../routes/paths';\n// components\nimport LoadingScreen from '../components/LoadingScreen';\n\n// ----------------------------------------------------------------------\n\nGuestGuard.propTypes = {\n children: PropTypes.node,\n};\n\nexport default function GuestGuard({ children }) {\n const { isAuthenticated, isInitialized } = useAuth();\n const navigate = useNavigate();\n\n if (!isInitialized) {\n return ;\n }\n\n if (isAuthenticated) {\n return ;\n }\n\n return <>{children};\n}\n","import PropTypes from 'prop-types';\nimport { useState } from 'react';\nimport { Navigate, useLocation } from 'react-router-dom';\n// hooks\nimport useAuth from '../hooks/useAuth';\n// pages\nimport Login from '../pages/auth/Login';\n// components\nimport LoadingScreen from '../components/LoadingScreen';\n\n// ----------------------------------------------------------------------\n\nAuthGuard.propTypes = {\n children: PropTypes.node,\n};\n\nexport default function AuthGuard({ children }) {\n const { isAuthenticated, isInitialized } = useAuth();\n const { pathname } = useLocation();\n const [requestedLocation, setRequestedLocation] = useState(null);\n\n if (!isInitialized) {\n return ;\n }\n\n if (!isAuthenticated) {\n if (pathname !== requestedLocation) {\n setRequestedLocation(pathname);\n }\n return ;\n }\n\n if (requestedLocation && pathname !== requestedLocation) {\n setRequestedLocation(null);\n return ;\n }\n\n return <>{children};\n}\n","import PropTypes from 'prop-types';\nimport { Navigate, useLocation } from 'react-router-dom';\n\n// hooks\nimport useAppData from '../hooks/useAppData';\n\n// ----------------------------------------------------------------------\n\nRoleBasedGuard.propTypes = {\n accessibleRoles: PropTypes.array, // Example ['admin', 'leader']\n children: PropTypes.node,\n};\n\nexport default function RoleBasedGuard({ accessibleRoles, children }) {\n const { companies, currentCompany, getRole } = useAppData();\n\n if (getRole() < 2) {\n return ;\n }\n\n return <>{children};\n}\n","import { Suspense, lazy } from 'react';\nimport { Navigate, useRoutes, useLocation } from 'react-router-dom';\n// layouts\n// import MainLayout from '../layouts/main';\nimport DashboardLayout from '../layouts/dashboard';\nimport LogoOnlyLayout from '../layouts/LogoOnlyLayout';\n// guards\nimport GuestGuard from '../guards/GuestGuard';\nimport AuthGuard from '../guards/AuthGuard';\nimport RoleBasedGuard from '../guards/RoleBasedGuard';\n// config\nimport { PATH_AFTER_LOGIN } from '../config';\n// components\nimport LoadingScreen from '../components/LoadingScreen';\n\n// ----------------------------------------------------------------------\n\nconst Loadable = (Component) => (props) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const { pathname } = useLocation();\n\n return (\n }>\n \n \n );\n};\n\nexport default function Router() {\n return useRoutes([\n {\n path: 'auth',\n children: [\n {\n path: 'login',\n element: (\n \n \n \n ),\n },\n {\n path: 'register',\n element: (\n \n \n \n ),\n },\n { path: 'login-unprotected', element: },\n { path: 'register-unprotected', element: },\n { path: 'reset-password', element: },\n { path: 'verify', element: },\n ],\n },\n\n // Dashboard Routes\n {\n path: '*',\n element: (\n \n \n \n ),\n children: [\n { index: true, element: },\n {\n path: 'login',\n element: (\n \n \n \n ),\n },\n { path: 'dashboard', element: },\n\n {\n path: 'projects',\n children: [\n { element: , index: true },\n { path: ':projectid', element: },\n ],\n },\n\n {\n path: 'company',\n element: (\n \n \n \n ),\n },\n { path: 'analytics', element: },\n { path: 'events', element: },\n {\n path: 'webhooks',\n children: [\n { element: , index: true },\n { path: 'details/', element: },\n { path: 'replay', element: },\n ],\n },\n { path: 'profile', element: },\n\n { path: 'form', element: },\n\n { path: '404', element: },\n { path: '*', element: },\n ],\n },\n\n {\n path: '*',\n element: (\n \n \n \n ),\n },\n\n { path: '*', element: },\n ]);\n}\n\n// IMPORT COMPONENTS\n\n// Authentication\nconst Login = Loadable(lazy(() => import('../pages/auth/Login')));\nconst Register = Loadable(lazy(() => import('../pages/auth/Register')));\nconst ResetPassword = Loadable(lazy(() => import('../pages/auth/ResetPassword')));\nconst VerifyCode = Loadable(lazy(() => import('../pages/auth/VerifyCode')));\n// Dashboard\nconst Home = Loadable(lazy(() => import('../pages/dashboard/Home')));\nconst Projects = Loadable(lazy(() => import('../pages/Projects')));\nconst CadenceForm = Loadable(lazy(() => import('../pages/CadenceForm')));\nconst EventsPage = Loadable(lazy(() => import('../pages/Events')));\nconst WebhookLogsPage = Loadable(lazy(() => import('../pages/WebhookLogs')));\nconst WebhookLogDetail = Loadable(lazy(() => import('../pages/WebhookLogDetail')));\nconst Replay = Loadable(lazy(() => import('../pages/replay')));\nconst UserProfile = Loadable(lazy(() => import('../pages/UserProfile')));\nconst AnalyticsPage = Loadable(lazy(() => import('../pages/AnalyticsPage')));\n\nconst ProjectDetails = Loadable(lazy(() => import('../pages/ProjectDetails')));\nconst CompanyManagement = Loadable(lazy(() => import('../pages/CompanyManagement')));\n\nconst NotFound = Loadable(lazy(() => import('../pages/Page404')));\n","// @mui\nimport { useTheme } from '@mui/material/styles';\n// hooks\nimport useResponsive from '../hooks/useResponsive';\n\n// ----------------------------------------------------------------------\n\nexport default function GetFontValue(variant) {\n const theme = useTheme();\n const breakpoints = useWidth();\n\n const key = theme.breakpoints.up(breakpoints === 'xl' ? 'lg' : breakpoints);\n\n const hasResponsive =\n variant === 'h1' ||\n variant === 'h2' ||\n variant === 'h3' ||\n variant === 'h4' ||\n variant === 'h5' ||\n variant === 'h6';\n\n const getFont =\n hasResponsive && theme.typography[variant][key] ? theme.typography[variant][key] : theme.typography[variant];\n\n const fontSize = remToPx(getFont.fontSize);\n const lineHeight = Number(theme.typography[variant].lineHeight) * fontSize;\n const { fontWeight } = theme.typography[variant];\n const { letterSpacing } = theme.typography[variant];\n\n return { fontSize, lineHeight, fontWeight, letterSpacing };\n}\n\n// ----------------------------------------------------------------------\n\nexport function remToPx(value) {\n return Math.round(parseFloat(value) * 16);\n}\n\nexport function pxToRem(value) {\n return `${value / 16}rem`;\n}\n\nexport function responsiveFontSizes({ sm, md, lg }) {\n return {\n '@media (min-width:600px)': {\n fontSize: pxToRem(sm)\n },\n '@media (min-width:900px)': {\n fontSize: pxToRem(md)\n },\n '@media (min-width:1200px)': {\n fontSize: pxToRem(lg)\n }\n };\n}\n\n// ----------------------------------------------------------------------\n\nfunction useWidth() {\n const theme = useTheme();\n const keys = [...theme.breakpoints.keys].reverse();\n return (\n keys.reduce((output, key) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const matches = useResponsive('up', key);\n return !output && matches ? key : output;\n }, null) || 'xs'\n );\n}\n","import { pxToRem, responsiveFontSizes } from '../utils/getFontValue';\n\n// ----------------------------------------------------------------------\n\nconst FONT_PRIMARY = 'Public Sans, sans-serif'; // Google Font\n// const FONT_SECONDARY = 'CircularStd, sans-serif'; // Local Font\n\nconst typography = {\n fontFamily: FONT_PRIMARY,\n fontWeightRegular: 400,\n fontWeightMedium: 600,\n fontWeightBold: 700,\n h1: {\n fontWeight: 700,\n lineHeight: 80 / 64,\n fontSize: pxToRem(40),\n letterSpacing: 2,\n ...responsiveFontSizes({ sm: 52, md: 58, lg: 64 }),\n },\n h2: {\n fontWeight: 700,\n lineHeight: 64 / 48,\n fontSize: pxToRem(32),\n ...responsiveFontSizes({ sm: 40, md: 44, lg: 48 }),\n },\n h3: {\n fontWeight: 700,\n lineHeight: 1.5,\n fontSize: pxToRem(24),\n ...responsiveFontSizes({ sm: 26, md: 30, lg: 32 }),\n },\n h4: {\n fontWeight: 700,\n lineHeight: 1.5,\n fontSize: pxToRem(20),\n ...responsiveFontSizes({ sm: 20, md: 24, lg: 24 }),\n },\n h5: {\n fontWeight: 700,\n lineHeight: 1.5,\n fontSize: pxToRem(18),\n ...responsiveFontSizes({ sm: 19, md: 20, lg: 20 }),\n },\n h6: {\n fontWeight: 700,\n lineHeight: 28 / 18,\n fontSize: pxToRem(17),\n ...responsiveFontSizes({ sm: 18, md: 18, lg: 18 }),\n },\n subtitle1: {\n fontWeight: 600,\n lineHeight: 1.5,\n fontSize: pxToRem(16),\n },\n subtitle2: {\n fontWeight: 600,\n lineHeight: 22 / 14,\n fontSize: pxToRem(14),\n },\n body1: {\n lineHeight: 1.5,\n fontSize: pxToRem(16),\n },\n body2: {\n lineHeight: 22 / 14,\n fontSize: pxToRem(14),\n },\n caption: {\n lineHeight: 1.5,\n fontSize: pxToRem(12),\n },\n overline: {\n fontWeight: 700,\n lineHeight: 1.5,\n fontSize: pxToRem(12),\n textTransform: 'uppercase',\n },\n button: {\n fontWeight: 700,\n lineHeight: 24 / 14,\n fontSize: pxToRem(14),\n textTransform: 'capitalize',\n },\n};\n\nexport default typography;\n","// ----------------------------------------------------------------------\n\nconst breakpoints = {\n values: {\n xs: 0,\n sm: 600,\n md: 900,\n lg: 1200,\n xl: 1536\n }\n};\n\nexport default breakpoints;\n","// @mui\nimport { SvgIcon } from '@mui/material';\n\n// ----------------------------------------------------------------------\n\n// CloseIcon\nexport function CloseIcon(props) {\n return (\n \n \n \n );\n}\n\n// StarIcon\nexport function StarIcon(props) {\n return (\n \n \n \n );\n}\n\n// Using for Alert\nexport function InfoIcon(props) {\n return (\n \n \n \n );\n}\n\nexport function WarningIcon(props) {\n return (\n \n \n \n );\n}\n\nexport function SuccessIcon(props) {\n return (\n \n \n \n );\n}\n\nexport function ErrorIcon(props) {\n return (\n \n \n \n );\n}\n\n// Using for Checkbox\nexport function CheckboxIcon(props) {\n return (\n \n \n \n );\n}\n\nexport function CheckboxCheckedIcon(props) {\n return (\n \n \n \n );\n}\n\nexport function CheckboxIndeterminateIcon(props) {\n return (\n \n \n \n );\n}\n\n// Using for Select Input\nexport function InputSelectIcon(props) {\n return (\n \n \n \n );\n}\n\n// Using for TreeView\nexport function TreeViewCollapseIcon(props) {\n return (\n \n \n \n );\n}\n\nexport function TreeViewExpandIcon(props) {\n return (\n \n \n \n );\n}\n\nexport function TreeViewEndIcon(props) {\n return (\n \n \n \n );\n}\n","//\nimport { StarIcon } from './CustomIcons';\n\n// ----------------------------------------------------------------------\n\nconst ICON_SMALL = { width: 20, height: 20 };\nconst ICON_LARGE = { width: 28, height: 28 };\n\nexport default function Rating(theme) {\n return {\n MuiRating: {\n defaultProps: {\n emptyIcon: ,\n icon: \n },\n\n styleOverrides: {\n root: {\n '&.Mui-disabled': {\n opacity: 0.48\n }\n },\n iconEmpty: { color: theme.palette.grey[500_48] },\n sizeSmall: { '& svg': { ...ICON_SMALL } },\n sizeLarge: { '& svg': { ...ICON_LARGE } }\n }\n }\n };\n}\n","import Fab from './Fab';\nimport Card from './Card';\nimport Chip from './Chip';\nimport Tabs from './Tabs';\nimport Menu from './Menu';\nimport Grid from './Grid';\nimport Link from './Link';\nimport Lists from './Lists';\nimport Table from './Table';\nimport Alert from './Alert';\nimport Badge from './Badge';\nimport Paper from './Paper';\nimport Input from './Input';\nimport Radio from './Radio';\nimport Drawer from './Drawer';\nimport Dialog from './Dialog';\nimport Avatar from './Avatar';\nimport Rating from './Rating';\nimport Slider from './Slider';\nimport Button from './Button';\nimport Switch from './Switch';\nimport Select from './Select';\nimport SvgIcon from './SvgIcon';\nimport Tooltip from './Tooltip';\nimport Popover from './Popover';\nimport Stepper from './Stepper';\nimport Pickers from './Pickers';\nimport DataGrid from './DataGrid';\nimport Skeleton from './Skeleton';\nimport Backdrop from './Backdrop';\nimport Snackbar from './Snackbar';\nimport Progress from './Progress';\nimport Timeline from './Timeline';\nimport TreeView from './TreeView';\nimport Checkbox from './Checkbox';\nimport Container from './Container';\nimport Accordion from './Accordion';\nimport Typography from './Typography';\nimport Pagination from './Pagination';\nimport IconButton from './IconButton';\nimport Breadcrumbs from './Breadcrumbs';\nimport ButtonGroup from './ButtonGroup';\nimport Autocomplete from './Autocomplete';\nimport ToggleButton from './ToggleButton';\nimport ControlLabel from './ControlLabel';\nimport LoadingButton from './LoadingButton';\n\n// ----------------------------------------------------------------------\n\nexport default function ComponentsOverrides(theme) {\n return Object.assign(\n Fab(theme),\n Tabs(theme),\n Chip(theme),\n Card(theme),\n Menu(theme),\n Grid(theme),\n Link(theme),\n Input(theme),\n Radio(theme),\n Badge(theme),\n Lists(theme),\n Table(theme),\n Paper(theme),\n Alert(theme),\n Switch(theme),\n Select(theme),\n Button(theme),\n Rating(theme),\n Dialog(theme),\n Avatar(theme),\n Slider(theme),\n Drawer(theme),\n Pickers(theme),\n Stepper(theme),\n Tooltip(theme),\n Popover(theme),\n SvgIcon(theme),\n Checkbox(theme),\n DataGrid(theme),\n Skeleton(theme),\n Timeline(theme),\n TreeView(theme),\n Backdrop(theme),\n Snackbar(theme),\n Progress(theme),\n Container(theme),\n Accordion(theme),\n IconButton(theme),\n Typography(theme),\n Pagination(theme),\n ButtonGroup(theme),\n Breadcrumbs(theme),\n Autocomplete(theme),\n ControlLabel(theme),\n ToggleButton(theme),\n LoadingButton(theme)\n );\n}\n","// ----------------------------------------------------------------------\n\nexport default function Fab(theme) {\n return {\n MuiFab: {\n defaultProps: {\n color: 'primary'\n },\n\n styleOverrides: {\n root: {\n boxShadow: theme.customShadows.z8,\n '&:hover': {\n boxShadow: 'none',\n backgroundColor: theme.palette.grey[400]\n }\n },\n primary: {\n boxShadow: theme.customShadows.primary,\n '&:hover': {\n backgroundColor: theme.palette.primary.dark\n }\n },\n secondary: {\n boxShadow: theme.customShadows.secondary,\n '&:hover': {\n backgroundColor: theme.palette.secondary.dark\n }\n },\n extended: {\n '& svg': {\n marginRight: theme.spacing(1)\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Tabs(theme) {\n return {\n MuiTab: {\n styleOverrides: {\n root: {\n padding: 0,\n fontWeight: theme.typography.fontWeightMedium,\n borderTopLeftRadius: theme.shape.borderRadius,\n borderTopRightRadius: theme.shape.borderRadius,\n '&.Mui-selected': {\n color: theme.palette.text.primary\n },\n '&:not(:last-of-type)': {\n marginRight: theme.spacing(5)\n },\n '@media (min-width: 600px)': {\n minWidth: 48\n }\n },\n labelIcon: {\n minHeight: 48,\n flexDirection: 'row',\n '& > *:first-of-type': {\n marginBottom: 0,\n marginRight: theme.spacing(1)\n }\n },\n wrapper: {\n flexDirection: 'row',\n whiteSpace: 'nowrap'\n },\n textColorInherit: {\n opacity: 1,\n color: theme.palette.text.secondary\n }\n }\n },\n MuiTabPanel: {\n styleOverrides: {\n root: {\n padding: 0\n }\n }\n },\n MuiTabScrollButton: {\n styleOverrides: {\n root: {\n width: 48,\n borderRadius: '50%'\n }\n }\n }\n };\n}\n","//\nimport { CloseIcon } from './CustomIcons';\n\n// ----------------------------------------------------------------------\n\nexport default function Chip(theme) {\n return {\n MuiChip: {\n defaultProps: {\n deleteIcon: \n },\n\n styleOverrides: {\n colorDefault: {\n '& .MuiChip-avatarMedium, .MuiChip-avatarSmall': {\n color: theme.palette.text.secondary\n }\n },\n outlined: {\n borderColor: theme.palette.grey[500_32],\n '&.MuiChip-colorPrimary': {\n borderColor: theme.palette.primary.main\n },\n '&.MuiChip-colorSecondary': {\n borderColor: theme.palette.secondary.main\n }\n },\n //\n avatarColorInfo: {\n color: theme.palette.info.contrastText,\n backgroundColor: theme.palette.info.dark\n },\n avatarColorSuccess: {\n color: theme.palette.success.contrastText,\n backgroundColor: theme.palette.success.dark\n },\n avatarColorWarning: {\n color: theme.palette.warning.contrastText,\n backgroundColor: theme.palette.warning.dark\n },\n avatarColorError: {\n color: theme.palette.error.contrastText,\n backgroundColor: theme.palette.error.dark\n }\n }\n }\n };\n}\n","import { alpha } from '@mui/material/styles';\n\n// ----------------------------------------------------------------------\n\nexport default function Card(theme) {\n const isLight = theme.palette.mode === 'light';\n\n const boxShadow = `0 0 2px 0 ${alpha(isLight ? theme.palette.grey[500] : theme.palette.common.black, 0.2)}, ${\n theme.customShadows.z12\n }`;\n\n return {\n MuiCard: {\n styleOverrides: {\n root: {\n boxShadow,\n position: 'relative',\n borderRadius: Number(theme.shape.borderRadius) * 2,\n zIndex: 0 // Fix Safari overflow: hidden with border radius\n }\n }\n },\n MuiCardHeader: {\n defaultProps: {\n titleTypographyProps: { variant: 'h6' },\n subheaderTypographyProps: { variant: 'body2', marginTop: theme.spacing(0.5) }\n },\n styleOverrides: {\n root: {\n padding: theme.spacing(3, 3, 0)\n }\n }\n },\n MuiCardContent: {\n styleOverrides: {\n root: {\n padding: theme.spacing(3)\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Menu(theme) {\n return {\n MuiMenuItem: {\n styleOverrides: {\n root: {\n '&.Mui-selected': {\n backgroundColor: theme.palette.action.selected,\n '&:hover': {\n backgroundColor: theme.palette.action.hover\n }\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Grid() {\n return {\n MuiGrid: {\n styleOverrides: {}\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Link() {\n return {\n MuiLink: {\n defaultProps: {\n underline: 'hover'\n },\n\n styleOverrides: {\n root: {}\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Input(theme) {\n return {\n MuiInputBase: {\n styleOverrides: {\n root: {\n '&.Mui-disabled': {\n '& svg': { color: theme.palette.text.disabled }\n }\n },\n input: {\n '&::placeholder': {\n opacity: 1,\n color: theme.palette.text.disabled\n }\n }\n }\n },\n MuiInput: {\n styleOverrides: {\n underline: {\n '&:before': {\n borderBottomColor: theme.palette.grey[500_56]\n }\n }\n }\n },\n MuiFilledInput: {\n styleOverrides: {\n root: {\n backgroundColor: theme.palette.grey[500_12],\n '&:hover': {\n backgroundColor: theme.palette.grey[500_16]\n },\n '&.Mui-focused': {\n backgroundColor: theme.palette.action.focus\n },\n '&.Mui-disabled': {\n backgroundColor: theme.palette.action.disabledBackground\n }\n },\n underline: {\n '&:before': {\n borderBottomColor: theme.palette.grey[500_56]\n }\n }\n }\n },\n MuiOutlinedInput: {\n styleOverrides: {\n root: {\n '& .MuiOutlinedInput-notchedOutline': {\n borderColor: theme.palette.grey[500_32]\n },\n '&.Mui-disabled': {\n '& .MuiOutlinedInput-notchedOutline': {\n borderColor: theme.palette.action.disabledBackground\n }\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Radio(theme) {\n return {\n MuiRadio: {\n styleOverrides: {\n root: {\n padding: theme.spacing(1),\n svg: {\n fontSize: 24,\n '&[font-size=small]': {\n fontSize: 20\n }\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Badge() {\n return {\n MuiBadge: {\n styleOverrides: {\n dot: {\n width: 10,\n height: 10,\n borderRadius: '50%'\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Lists(theme) {\n return {\n MuiListItemIcon: {\n styleOverrides: {\n root: {\n color: 'inherit',\n minWidth: 'auto',\n marginRight: theme.spacing(2)\n }\n }\n },\n MuiListItemAvatar: {\n styleOverrides: {\n root: {\n minWidth: 'auto',\n marginRight: theme.spacing(2)\n }\n }\n },\n MuiListItemText: {\n styleOverrides: {\n root: {\n marginTop: 0,\n marginBottom: 0\n },\n multiline: {\n marginTop: 0,\n marginBottom: 0\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Table(theme) {\n return {\n MuiTableRow: {\n styleOverrides: {\n root: {\n '&.Mui-selected': {\n backgroundColor: theme.palette.action.selected,\n '&:hover': {\n backgroundColor: theme.palette.action.hover\n }\n }\n }\n }\n },\n MuiTableCell: {\n styleOverrides: {\n root: {\n borderBottom: 'none'\n },\n head: {\n color: theme.palette.text.secondary,\n backgroundColor: theme.palette.background.neutral,\n '&:first-of-type': {\n paddingLeft: theme.spacing(3),\n borderTopLeftRadius: theme.shape.borderRadius,\n borderBottomLeftRadius: theme.shape.borderRadius,\n boxShadow: `inset 8px 0 0 ${theme.palette.background.paper}`\n },\n '&:last-of-type': {\n paddingRight: theme.spacing(3),\n borderTopRightRadius: theme.shape.borderRadius,\n borderBottomRightRadius: theme.shape.borderRadius,\n boxShadow: `inset -8px 0 0 ${theme.palette.background.paper}`\n }\n },\n stickyHeader: {\n backgroundColor: theme.palette.background.paper,\n backgroundImage: `linear-gradient(to bottom, ${theme.palette.background.neutral} 0%, ${theme.palette.background.neutral} 100%)`\n },\n body: {\n '&:first-of-type': {\n paddingLeft: theme.spacing(3)\n },\n '&:last-of-type': {\n paddingRight: theme.spacing(3)\n }\n }\n }\n },\n MuiTablePagination: {\n styleOverrides: {\n root: {\n borderTop: `solid 1px ${theme.palette.divider}`\n },\n toolbar: {\n height: 64\n },\n select: {\n '&:focus': {\n borderRadius: theme.shape.borderRadius\n }\n },\n selectIcon: {\n width: 20,\n height: 20,\n marginTop: -4\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Paper(theme) {\n return {\n MuiPaper: {\n defaultProps: {\n elevation: 0\n },\n\n variants: [\n {\n props: { variant: 'outlined' },\n style: { borderColor: theme.palette.grey[500_12] }\n }\n ],\n\n styleOverrides: {\n root: {\n backgroundImage: 'none'\n }\n }\n }\n };\n}\n","// @mui\n//\nimport { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from './CustomIcons';\n\n// ----------------------------------------------------------------------\n\nexport default function Alert(theme) {\n const isLight = theme.palette.mode === 'light';\n\n const standardStyle = (color) => ({\n color: theme.palette[color][isLight ? 'darker' : 'lighter'],\n backgroundColor: theme.palette[color][isLight ? 'lighter' : 'darker'],\n '& .MuiAlert-icon': {\n color: theme.palette[color][isLight ? 'main' : 'light']\n }\n });\n\n const filledStyle = (color) => ({\n color: theme.palette[color].contrastText\n });\n\n const outlinedStyle = (color) => ({\n color: theme.palette[color][isLight ? 'darker' : 'lighter'],\n border: `solid 1px ${theme.palette[color][isLight ? 'light' : 'dark']}`,\n backgroundColor: theme.palette[color][isLight ? 'lighter' : 'darker'],\n '& .MuiAlert-icon': {\n color: theme.palette[color][isLight ? 'main' : 'light']\n }\n });\n\n return {\n MuiAlert: {\n defaultProps: {\n iconMapping: {\n info: ,\n success: ,\n warning: ,\n error: \n }\n },\n\n styleOverrides: {\n message: {\n '& .MuiAlertTitle-root': {\n marginBottom: theme.spacing(0.5)\n }\n },\n action: {\n '& button:not(:first-of-type)': {\n marginLeft: theme.spacing(1)\n }\n },\n\n standardInfo: standardStyle('info'),\n standardSuccess: standardStyle('success'),\n standardWarning: standardStyle('warning'),\n standardError: standardStyle('error'),\n\n filledInfo: filledStyle('info'),\n filledSuccess: filledStyle('success'),\n filledWarning: filledStyle('warning'),\n filledError: filledStyle('error'),\n\n outlinedInfo: outlinedStyle('info'),\n outlinedSuccess: outlinedStyle('success'),\n outlinedWarning: outlinedStyle('warning'),\n outlinedError: outlinedStyle('error')\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Switch(theme) {\n const isLight = theme.palette.mode === 'light';\n\n return {\n MuiSwitch: {\n styleOverrides: {\n thumb: {\n boxShadow: theme.customShadows.z1\n },\n track: {\n opacity: 1,\n backgroundColor: theme.palette.grey[500]\n },\n switchBase: {\n left: 0,\n right: 'auto',\n '&:not(:.Mui-checked)': {\n color: theme.palette.grey[isLight ? 100 : 300]\n },\n '&.Mui-checked.Mui-disabled, &.Mui-disabled': {\n color: theme.palette.grey[isLight ? 400 : 600]\n },\n '&.Mui-disabled+.MuiSwitch-track': {\n opacity: 1,\n backgroundColor: `${theme.palette.action.disabledBackground} !important`\n }\n }\n }\n }\n };\n}\n","//\n//\nimport { InputSelectIcon } from './CustomIcons';\n\n// ----------------------------------------------------------------------\n\nexport default function Select() {\n return {\n MuiSelect: {\n defaultProps: {\n IconComponent: InputSelectIcon\n },\n\n styleOverrides: {\n root: {}\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Button(theme) {\n return {\n MuiButton: {\n styleOverrides: {\n root: {\n '&:hover': {\n boxShadow: 'none'\n }\n },\n sizeLarge: {\n height: 48\n },\n // contained\n containedInherit: {\n color: theme.palette.grey[800],\n boxShadow: theme.customShadows.z8,\n '&:hover': {\n backgroundColor: theme.palette.grey[400]\n }\n },\n containedPrimary: {\n boxShadow: theme.customShadows.primary\n },\n containedSecondary: {\n boxShadow: theme.customShadows.secondary\n },\n containedInfo: {\n boxShadow: theme.customShadows.info\n },\n containedSuccess: {\n boxShadow: theme.customShadows.success\n },\n containedWarning: {\n boxShadow: theme.customShadows.warning\n },\n containedError: {\n boxShadow: theme.customShadows.error\n },\n // outlined\n outlinedInherit: {\n border: `1px solid ${theme.palette.grey[500_32]}`,\n '&:hover': {\n backgroundColor: theme.palette.action.hover\n }\n },\n textInherit: {\n '&:hover': {\n backgroundColor: theme.palette.action.hover\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Dialog(theme) {\n return {\n MuiDialog: {\n styleOverrides: {\n paper: {\n boxShadow: theme.customShadows.z24,\n '&.MuiPaper-rounded': {\n borderRadius: Number(theme.shape.borderRadius) * 2\n },\n '&.MuiDialog-paperFullScreen': {\n borderRadius: 0\n },\n '&.MuiDialog-paper .MuiDialogActions-root': {\n padding: theme.spacing(3)\n },\n '@media (max-width: 600px)': {\n margin: theme.spacing(2)\n },\n '@media (max-width: 663.95px)': {\n '&.MuiDialog-paperWidthSm.MuiDialog-paperScrollBody': {\n maxWidth: '100%'\n }\n }\n },\n paperFullWidth: {\n width: '100%'\n }\n }\n },\n MuiDialogTitle: {\n styleOverrides: {\n root: {\n padding: theme.spacing(3, 3, 0)\n }\n }\n },\n MuiDialogContent: {\n styleOverrides: {\n root: {\n borderTop: 0,\n borderBottom: 0,\n padding: theme.spacing(3)\n }\n }\n },\n MuiDialogActions: {\n styleOverrides: {\n root: {\n '& > :not(:first-of-type)': {\n marginLeft: theme.spacing(1.5)\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Avatar(theme) {\n return {\n MuiAvatar: {\n styleOverrides: {\n colorDefault: {\n color: theme.palette.text.secondary,\n backgroundColor: theme.palette.grey[400]\n }\n }\n },\n MuiAvatarGroup: {\n styleOverrides: {\n avatar: {\n fontSize: 16,\n fontWeight: theme.typography.fontWeightMedium,\n '&:first-of-type': {\n fontSize: 14,\n color: theme.palette.primary.main,\n backgroundColor: theme.palette.primary.lighter\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Slider(theme) {\n const isLight = theme.palette.mode === 'light';\n\n return {\n MuiSlider: {\n defaultProps: {\n size: 'small'\n },\n\n styleOverrides: {\n root: {\n '&.Mui-disabled': {\n color: theme.palette.action.disabled\n }\n },\n markLabel: {\n fontSize: 13,\n color: theme.palette.text.disabled\n },\n valueLabel: {\n borderRadius: 8,\n backgroundColor: theme.palette.grey[isLight ? 800 : 700]\n }\n }\n }\n };\n}\n","import { alpha } from '@mui/material';\n\n// ----------------------------------------------------------------------\n\nexport default function Drawer(theme) {\n const isLight = theme.palette.mode === 'light';\n\n return {\n MuiDrawer: {\n styleOverrides: {\n modal: {\n '&[role=\"presentation\"]': {\n '& .MuiDrawer-paperAnchorLeft': {\n boxShadow: `8px 24px 24px 12px ${alpha(theme.palette.grey[900], isLight ? 0.16 : 0.48)}`\n },\n '& .MuiDrawer-paperAnchorRight': {\n boxShadow: `-8px 24px 24px 12px ${alpha(theme.palette.grey[900], isLight ? 0.16 : 0.48)}`\n }\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Pickers() {\n return {};\n}\n","// ----------------------------------------------------------------------\n\nexport default function Stepper(theme) {\n return {\n MuiStepConnector: {\n styleOverrides: {\n line: {\n borderColor: theme.palette.divider\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Tooltip(theme) {\n const isLight = theme.palette.mode === 'light';\n\n return {\n MuiTooltip: {\n styleOverrides: {\n tooltip: {\n backgroundColor: theme.palette.grey[isLight ? 800 : 700]\n },\n arrow: {\n color: theme.palette.grey[isLight ? 800 : 700]\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Popover(theme) {\n return {\n MuiPopover: {\n styleOverrides: {\n paper: {\n boxShadow: theme.customShadows.z12\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function SvgIcon() {\n return {\n MuiSvgIcon: {\n styleOverrides: {\n fontSizeSmall: {\n width: 20,\n height: 20,\n fontSize: 'inherit'\n },\n fontSizeLarge: {\n width: 32,\n height: 32,\n fontSize: 'inherit'\n }\n }\n }\n };\n}\n","//\nimport { CheckboxIcon, CheckboxCheckedIcon, CheckboxIndeterminateIcon } from './CustomIcons';\n\n// ----------------------------------------------------------------------\n\nexport default function Checkbox(theme) {\n return {\n MuiCheckbox: {\n defaultProps: {\n icon: ,\n checkedIcon: ,\n indeterminateIcon: \n },\n\n styleOverrides: {\n root: {\n padding: theme.spacing(1),\n '&.Mui-checked.Mui-disabled, &.Mui-disabled': {\n color: theme.palette.action.disabled\n },\n '& .MuiSvgIcon-fontSizeMedium': {\n width: 24,\n height: 24\n },\n '& .MuiSvgIcon-fontSizeSmall': {\n width: 20,\n height: 20\n },\n svg: {\n fontSize: 24,\n '&[font-size=small]': {\n fontSize: 20\n }\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function DataGrid(theme) {\n return {\n MuiDataGrid: {\n styleOverrides: {\n root: {\n borderRadius: 0,\n border: `1px solid transparent`,\n '& .MuiTablePagination-root': {\n borderTop: 0\n },\n '& .MuiDataGrid-toolbarContainer': {\n padding: theme.spacing(2),\n backgroundColor: theme.palette.background.neutral,\n '& .MuiButton-root': {\n marginRight: theme.spacing(1.5),\n color: theme.palette.text.primary,\n '&:hover': {\n backgroundColor: theme.palette.action.hover\n }\n }\n },\n '& .MuiDataGrid-cell, .MuiDataGrid-columnsContainer': {\n borderBottom: `1px solid ${theme.palette.divider}`\n },\n '& .MuiDataGrid-columnSeparator': {\n color: theme.palette.divider\n },\n '& .MuiDataGrid-columnHeader[data-field=\"__check__\"]': {\n padding: 0\n }\n }\n }\n },\n MuiGridMenu: {\n styleOverrides: {\n root: {\n '& .MuiDataGrid-gridMenuList': {\n boxShadow: theme.customShadows.z20,\n borderRadius: theme.shape.borderRadius\n },\n '& .MuiMenuItem-root': {\n ...theme.typography.body2\n }\n }\n }\n },\n MuiGridFilterForm: {\n styleOverrides: {\n root: {\n padding: theme.spacing(1.5, 0),\n '& .MuiFormControl-root': {\n margin: theme.spacing(0, 0.5)\n },\n '& .MuiInput-root': {\n marginTop: theme.spacing(3),\n '&::before, &::after': {\n display: 'none'\n },\n '& .MuiNativeSelect-select, .MuiInput-input': {\n ...theme.typography.body2,\n padding: theme.spacing(0.75, 1),\n borderRadius: theme.shape.borderRadius,\n backgroundColor: theme.palette.background.neutral\n },\n '& .MuiSvgIcon-root': {\n right: 4\n }\n }\n }\n }\n },\n MuiGridPanelFooter: {\n styleOverrides: {\n root: {\n padding: theme.spacing(2),\n justifyContent: 'flex-end',\n '& .MuiButton-root': {\n '&:first-of-type': {\n marginRight: theme.spacing(1.5),\n color: theme.palette.text.primary,\n '&:hover': {\n backgroundColor: theme.palette.action.hover\n }\n },\n '&:last-of-type': {\n color: theme.palette.common.white,\n backgroundColor: theme.palette.primary.main,\n '&:hover': {\n backgroundColor: theme.palette.primary.dark\n }\n }\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Skeleton(theme) {\n return {\n MuiSkeleton: {\n defaultProps: {\n animation: 'wave'\n },\n\n styleOverrides: {\n root: {\n backgroundColor: theme.palette.background.neutral\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Timeline(theme) {\n return {\n MuiTimelineDot: {\n styleOverrides: {\n root: {\n boxShadow: 'none'\n }\n }\n },\n\n MuiTimelineConnector: {\n styleOverrides: {\n root: {\n backgroundColor: theme.palette.divider\n }\n }\n }\n };\n}\n","//\nimport { TreeViewCollapseIcon, TreeViewExpandIcon, TreeViewEndIcon } from './CustomIcons';\n\n// ----------------------------------------------------------------------\n\nexport default function TreeView(theme) {\n return {\n MuiTreeView: {\n defaultProps: {\n defaultCollapseIcon: ,\n defaultExpandIcon: ,\n defaultEndIcon: \n }\n },\n MuiTreeItem: {\n styleOverrides: {\n label: { ...theme.typography.body2 },\n iconContainer: { width: 'auto' }\n }\n }\n };\n}\n","import { alpha } from '@mui/material/styles';\n\n// ----------------------------------------------------------------------\n\nexport default function Backdrop(theme) {\n const varLow = alpha(theme.palette.grey[900], 0.48);\n const varHigh = alpha(theme.palette.grey[900], 1);\n\n return {\n MuiBackdrop: {\n styleOverrides: {\n root: {\n background: [\n `rgb(22,28,36)`,\n `-moz-linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`,\n `-webkit-linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`,\n `linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`\n ],\n '&.MuiBackdrop-invisible': {\n background: 'transparent'\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Snackbar() {\n return {\n MuiSnackbarContent: {\n styleOverrides: {\n root: {}\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Progress(theme) {\n const isLight = theme.palette.mode === 'light';\n\n return {\n MuiLinearProgress: {\n styleOverrides: {\n root: {\n borderRadius: 4,\n overflow: 'hidden'\n },\n bar: {\n borderRadius: 4\n },\n colorPrimary: {\n backgroundColor: theme.palette.primary[isLight ? 'lighter' : 'darker']\n },\n buffer: {\n backgroundColor: 'transparent'\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Container() {\n return {\n MuiContainer: {\n styleOverrides: {\n root: {}\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Accordion(theme) {\n return {\n MuiAccordion: {\n styleOverrides: {\n root: {\n '&.Mui-expanded': {\n boxShadow: theme.customShadows.z8,\n borderRadius: theme.shape.borderRadius\n },\n '&.Mui-disabled': {\n backgroundColor: 'transparent'\n }\n }\n }\n },\n MuiAccordionSummary: {\n styleOverrides: {\n root: {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n '&.Mui-disabled': {\n opacity: 1,\n color: theme.palette.action.disabled,\n '& .MuiTypography-root': {\n color: 'inherit'\n }\n }\n },\n expandIconWrapper: {\n color: 'inherit'\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function IconButton() {\n return {\n MuiIconButton: {\n styleOverrides: {\n root: {}\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Typography(theme) {\n return {\n MuiTypography: {\n styleOverrides: {\n paragraph: {\n marginBottom: theme.spacing(2)\n },\n gutterBottom: {\n marginBottom: theme.spacing(1)\n }\n }\n }\n };\n}\n","import { alpha } from '@mui/material/styles';\n\n// ----------------------------------------------------------------------\n\nexport default function Pagination(theme) {\n return {\n MuiPaginationItem: {\n styleOverrides: {\n root: {\n '&.Mui-selected': {\n fontWeight: theme.typography.fontWeightBold\n }\n },\n textPrimary: {\n '&.Mui-selected': {\n color: theme.palette.primary.main,\n backgroundColor: alpha(theme.palette.primary.main, 0.08),\n '&:hover, &.Mui-focusVisible': {\n backgroundColor: `${alpha(theme.palette.primary.main, 0.24)} !important`\n }\n }\n },\n outlined: {\n border: `1px solid ${theme.palette.grey[500_32]}`\n },\n outlinedPrimary: {\n '&.Mui-selected': {\n backgroundColor: alpha(theme.palette.primary.main, 0.08),\n border: `1px solid ${alpha(theme.palette.primary.main, 0.24)}`\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function ButtonGroup(theme) {\n const styleContained = (color) => ({\n props: { variant: 'contained', color },\n style: { boxShadow: theme.customShadows[color] }\n });\n\n return {\n MuiButtonGroup: {\n variants: [\n {\n props: { variant: 'contained', color: 'inherit' },\n style: { boxShadow: theme.customShadows.z8 }\n },\n styleContained('primary'),\n styleContained('secondary'),\n styleContained('info'),\n styleContained('success'),\n styleContained('warning'),\n styleContained('error'),\n\n {\n props: { disabled: true },\n style: {\n boxShadow: 'none',\n '& .MuiButtonGroup-grouped.Mui-disabled': {\n color: theme.palette.action.disabled,\n borderColor: `${theme.palette.action.disabledBackground} !important`,\n '&.MuiButton-contained': {\n backgroundColor: theme.palette.action.disabledBackground\n }\n }\n }\n }\n ],\n\n styleOverrides: {\n root: {\n '&:hover': {\n boxShadow: 'none'\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function Breadcrumbs(theme) {\n return {\n MuiBreadcrumbs: {\n styleOverrides: {\n separator: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2)\n }\n }\n }\n };\n}\n","import { alpha } from '@mui/material/styles';\n\n// ----------------------------------------------------------------------\n\nexport default function Autocomplete(theme) {\n const isLight = theme.palette.mode === 'light';\n\n const boxShadow = `0 0 2px 0 ${alpha(isLight ? theme.palette.grey[500] : theme.palette.common.black, 0.2)}, ${\n theme.customShadows.z20\n }`;\n\n return {\n MuiAutocomplete: {\n styleOverrides: {\n popper: {\n minWidth: 260,\n maxWidth: 260,\n },\n paper: {\n boxShadow,\n },\n listbox: {\n padding: theme.spacing(0, 1),\n '& .MuiAutocomplete-option': {\n padding: theme.spacing(1),\n margin: theme.spacing(1, 0),\n borderRadius: theme.shape.borderRadius,\n },\n },\n },\n },\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function ControlLabel(theme) {\n return {\n MuiFormControlLabel: {\n styleOverrides: {\n label: {\n ...theme.typography.body2\n }\n }\n },\n MuiFormHelperText: {\n styleOverrides: {\n root: {\n marginTop: theme.spacing(1)\n }\n }\n },\n MuiFormLabel: {\n styleOverrides: {\n root: {\n color: theme.palette.text.disabled\n }\n }\n }\n };\n}\n","import { alpha } from '@mui/material/styles';\n\n// ----------------------------------------------------------------------\n\nexport default function ToggleButton(theme) {\n const style = (color) => ({\n props: { color },\n style: {\n '&:hover': {\n borderColor: alpha(theme.palette[color].main, 0.48),\n backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)\n },\n '&.Mui-selected': {\n borderColor: alpha(theme.palette[color].main, 0.48)\n }\n }\n });\n\n return {\n MuiToggleButton: {\n variants: [\n {\n props: { color: 'standard' },\n style: {\n '&.Mui-selected': {\n backgroundColor: theme.palette.action.selected\n }\n }\n },\n style('primary'),\n style('secondary'),\n style('info'),\n style('success'),\n style('warning'),\n style('error')\n ]\n },\n MuiToggleButtonGroup: {\n styleOverrides: {\n root: {\n borderRadius: theme.shape.borderRadius,\n backgroundColor: theme.palette.background.paper,\n border: `solid 1px ${theme.palette.grey[500_12]}`,\n '& .MuiToggleButton-root': {\n margin: 4,\n borderColor: 'transparent !important',\n borderRadius: `${theme.shape.borderRadius}px !important`\n }\n }\n }\n }\n };\n}\n","// ----------------------------------------------------------------------\n\nexport default function LoadingButton() {\n return {\n MuiLoadingButton: {\n styleOverrides: {\n root: {\n '&.MuiButton-text': {\n '& .MuiLoadingButton-startIconPendingStart': {\n marginLeft: 0\n },\n '& .MuiLoadingButton-endIconPendingEnd': {\n marginRight: 0\n }\n }\n }\n }\n }\n };\n}\n","// @mui\nimport { alpha } from '@mui/material/styles';\n//\nimport palette from './palette';\n\n// ----------------------------------------------------------------------\n\nconst LIGHT_MODE = palette.light.grey[500];\nconst DARK_MODE = '#000000';\n\nconst createShadow = (color) => {\n const transparent1 = alpha(color, 0.2);\n const transparent2 = alpha(color, 0.14);\n const transparent3 = alpha(color, 0.12);\n return [\n 'none',\n `0px 2px 1px -1px ${transparent1},0px 1px 1px 0px ${transparent2},0px 1px 3px 0px ${transparent3}`,\n `0px 3px 1px -2px ${transparent1},0px 2px 2px 0px ${transparent2},0px 1px 5px 0px ${transparent3}`,\n `0px 3px 3px -2px ${transparent1},0px 3px 4px 0px ${transparent2},0px 1px 8px 0px ${transparent3}`,\n `0px 2px 4px -1px ${transparent1},0px 4px 5px 0px ${transparent2},0px 1px 10px 0px ${transparent3}`,\n `0px 3px 5px -1px ${transparent1},0px 5px 8px 0px ${transparent2},0px 1px 14px 0px ${transparent3}`,\n `0px 3px 5px -1px ${transparent1},0px 6px 10px 0px ${transparent2},0px 1px 18px 0px ${transparent3}`,\n `0px 4px 5px -2px ${transparent1},0px 7px 10px 1px ${transparent2},0px 2px 16px 1px ${transparent3}`,\n `0px 5px 5px -3px ${transparent1},0px 8px 10px 1px ${transparent2},0px 3px 14px 2px ${transparent3}`,\n `0px 5px 6px -3px ${transparent1},0px 9px 12px 1px ${transparent2},0px 3px 16px 2px ${transparent3}`,\n `0px 6px 6px -3px ${transparent1},0px 10px 14px 1px ${transparent2},0px 4px 18px 3px ${transparent3}`,\n `0px 6px 7px -4px ${transparent1},0px 11px 15px 1px ${transparent2},0px 4px 20px 3px ${transparent3}`,\n `0px 7px 8px -4px ${transparent1},0px 12px 17px 2px ${transparent2},0px 5px 22px 4px ${transparent3}`,\n `0px 7px 8px -4px ${transparent1},0px 13px 19px 2px ${transparent2},0px 5px 24px 4px ${transparent3}`,\n `0px 7px 9px -4px ${transparent1},0px 14px 21px 2px ${transparent2},0px 5px 26px 4px ${transparent3}`,\n `0px 8px 9px -5px ${transparent1},0px 15px 22px 2px ${transparent2},0px 6px 28px 5px ${transparent3}`,\n `0px 8px 10px -5px ${transparent1},0px 16px 24px 2px ${transparent2},0px 6px 30px 5px ${transparent3}`,\n `0px 8px 11px -5px ${transparent1},0px 17px 26px 2px ${transparent2},0px 6px 32px 5px ${transparent3}`,\n `0px 9px 11px -5px ${transparent1},0px 18px 28px 2px ${transparent2},0px 7px 34px 6px ${transparent3}`,\n `0px 9px 12px -6px ${transparent1},0px 19px 29px 2px ${transparent2},0px 7px 36px 6px ${transparent3}`,\n `0px 10px 13px -6px ${transparent1},0px 20px 31px 3px ${transparent2},0px 8px 38px 7px ${transparent3}`,\n `0px 10px 13px -6px ${transparent1},0px 21px 33px 3px ${transparent2},0px 8px 40px 7px ${transparent3}`,\n `0px 10px 14px -6px ${transparent1},0px 22px 35px 3px ${transparent2},0px 8px 42px 7px ${transparent3}`,\n `0px 11px 14px -7px ${transparent1},0px 23px 36px 3px ${transparent2},0px 9px 44px 8px ${transparent3}`,\n `0px 11px 15px -7px ${transparent1},0px 24px 38px 3px ${transparent2},0px 9px 46px 8px ${transparent3}`\n ];\n};\n\nconst createCustomShadow = (color) => {\n const transparent = alpha(color, 0.12);\n return {\n z1: `0 1px 2px 0 ${transparent}`,\n z8: `0 8px 16px 0 ${transparent}`,\n z12: `0 12px 24px -4px ${transparent}`,\n z16: `0 16px 32px -4px ${transparent}`,\n z20: `0 20px 40px -4px ${transparent}`,\n z24: `0 24px 48px 0 ${transparent}`,\n primary: `0 8px 16px 0 ${alpha(palette.light.primary.main, 0.24)}`,\n info: `0 8px 16px 0 ${alpha(palette.light.info.main, 0.24)}`,\n secondary: `0 8px 16px 0 ${alpha(palette.light.secondary.main, 0.24)}`,\n success: `0 8px 16px 0 ${alpha(palette.light.success.main, 0.24)}`,\n warning: `0 8px 16px 0 ${alpha(palette.light.warning.main, 0.24)}`,\n error: `0 8px 16px 0 ${alpha(palette.light.error.main, 0.24)}`\n };\n};\n\nexport const customShadows = {\n light: createCustomShadow(LIGHT_MODE),\n dark: createCustomShadow(DARK_MODE)\n};\n\nconst shadows = {\n light: createShadow(LIGHT_MODE),\n dark: createShadow(DARK_MODE)\n};\n\nexport default shadows;\n","import PropTypes from 'prop-types';\nimport { useMemo } from 'react';\n// @mui\nimport { CssBaseline } from '@mui/material';\nimport { createTheme, ThemeProvider as MUIThemeProvider, StyledEngineProvider } from '@mui/material/styles';\n// hooks\nimport useSettings from '../hooks/useSettings';\n//\nimport palette from './palette';\nimport typography from './typography';\nimport breakpoints from './breakpoints';\nimport componentsOverride from './overrides';\nimport shadows, { customShadows } from './shadows';\n\n// ----------------------------------------------------------------------\n\nThemeProvider.propTypes = {\n children: PropTypes.node\n};\n\nexport default function ThemeProvider({ children }) {\n const { themeMode, themeDirection } = useSettings();\n const isLight = themeMode === 'light';\n\n const themeOptions = useMemo(\n () => ({\n palette: isLight ? palette.light : palette.dark,\n typography,\n breakpoints,\n shape: { borderRadius: 8 },\n direction: themeDirection,\n shadows: isLight ? shadows.light : shadows.dark,\n customShadows: isLight ? customShadows.light : customShadows.dark\n }),\n [isLight, themeDirection]\n );\n\n const theme = createTheme(themeOptions);\n theme.components = componentsOverride(theme);\n\n return (\n \n \n \n {children}\n \n \n );\n}\n","// @mui\nimport { useTheme } from '@mui/material/styles';\nimport { GlobalStyles as MUIGlobalStyles } from '@mui/material';\n\n// ----------------------------------------------------------------------\n\nexport default function GlobalStyles() {\n const theme = useTheme();\n\n return (\n \n );\n}\n","// @mui\nimport {\n Box,\n Grid,\n Radio,\n Paper,\n RadioGroup,\n CardActionArea,\n FormControlLabel,\n} from '@mui/material';\n// hooks\nimport useSettings from '../../hooks/useSettings';\n// components\nimport Iconify from '../Iconify';\n\n// ----------------------------------------------------------------------\n\nexport default function SettingMode() {\n const { themeMode, onChangeMode } = useSettings();\n\n return (\n \n \n {['light', 'dark'].map((mode, index) => (\n \n theme.customShadows.z12,\n }),\n }}\n >\n \n \n \n \n\n }\n sx={{\n m: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n position: 'absolute',\n }}\n />\n \n \n \n ))}\n \n \n );\n}\n","import PropTypes from 'prop-types';\n// @mui\nimport { alpha, styled } from '@mui/material/styles';\nimport { Tooltip } from '@mui/material';\n// utils\nimport cssStyles from '../../utils/cssStyles';\n//\nimport Iconify from '../Iconify';\nimport { IconButtonAnimate } from '../animate';\n\n// ----------------------------------------------------------------------\n\nconst RootStyle = styled('span')(({ theme }) => ({\n ...cssStyles(theme).bgBlur({ opacity: 0.64 }),\n right: 0,\n top: '50%',\n position: 'fixed',\n marginTop: theme.spacing(-3),\n padding: theme.spacing(0.5),\n zIndex: theme.zIndex.drawer + 2,\n borderRadius: '24px 0 20px 24px',\n boxShadow: `-12px 12px 32px -4px ${alpha(\n theme.palette.mode === 'light' ? theme.palette.grey[600] : theme.palette.common.black,\n 0.36\n )}`,\n}));\n\nconst DotStyle = styled('span')(({ theme }) => ({\n top: 8,\n width: 8,\n height: 8,\n right: 10,\n borderRadius: '50%',\n position: 'absolute',\n backgroundColor: theme.palette.error.main,\n}));\n\n// ----------------------------------------------------------------------\n\nToggleButton.propTypes = {\n notDefault: PropTypes.bool,\n onToggle: PropTypes.func,\n open: PropTypes.bool,\n};\n\nexport default function ToggleButton({ notDefault, open, onToggle }) {\n return (\n \n {notDefault && !open && }\n\n \n theme.transitions.create('all'),\n '&:hover': {\n color: 'primary.main',\n bgcolor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n },\n }}\n >\n \n \n \n \n );\n}\n","// @mui\nimport { Paper, CardActionArea, Stack } from '@mui/material';\n// hooks\nimport useSettings from '../../hooks/useSettings';\n// components\nimport Iconify from '../Iconify';\n\n// ----------------------------------------------------------------------\n\nexport default function SettingStretch() {\n const { themeStretch, onToggleStretch } = useSettings();\n\n return (\n \n \n theme.transitions.create('width'),\n boxShadow: (theme) => theme.customShadows.z12,\n ...(themeStretch && {\n width: 1,\n color: 'primary.main',\n }),\n }}\n >\n \n \n \n \n \n );\n}\n","import {\n Box,\n Grid,\n Paper,\n Radio,\n RadioGroup,\n CardActionArea,\n FormControlLabel,\n} from '@mui/material';\n// hooks\nimport useSettings from '../../hooks/useSettings';\n\n// ----------------------------------------------------------------------\n\nexport default function SettingDirection() {\n const { themeDirection, onChangeDirection } = useSettings();\n\n return (\n \n \n {['ltr', 'rtl'].map((direction, index) => (\n \n theme.customShadows.z12,\n }),\n }}\n >\n \n \n {[56, 36, 24].map((size, index) => (\n \n ))}\n \n }\n sx={{\n m: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n position: 'absolute',\n }}\n />\n \n \n \n ))}\n \n \n );\n}\n","import { useState } from 'react';\n// @mui\nimport { alpha } from '@mui/material/styles';\nimport { Button } from '@mui/material';\n// components\nimport Iconify from '../Iconify';\n\n// ----------------------------------------------------------------------\n\nexport default function SettingFullscreen() {\n const [fullscreen, setFullscreen] = useState(false);\n\n const toggleFullScreen = () => {\n if (!document.fullscreenElement) {\n document.documentElement.requestFullscreen();\n setFullscreen(true);\n } else if (document.exitFullscreen) {\n document.exitFullscreen();\n setFullscreen(false);\n }\n };\n\n return (\n }\n onClick={toggleFullScreen}\n sx={{\n fontSize: 14,\n ...(fullscreen && {\n bgcolor: (theme) =>\n alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),\n }),\n }}\n >\n {fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}\n \n );\n}\n","import { AnimatePresence, m } from 'framer-motion';\nimport { useState, useEffect } from 'react';\n// @mui\nimport { alpha, styled } from '@mui/material/styles';\nimport { Backdrop, Divider, Typography, Stack } from '@mui/material';\n// hooks\nimport useSettings from '../../hooks/useSettings';\n// utils\nimport cssStyles from '../../utils/cssStyles';\n// config\nimport { DRAWER_WIDTH, defaultSettings } from '../../config';\n//\nimport Iconify from '../Iconify';\nimport Scrollbar from '../Scrollbar';\nimport SettingMode from './SettingMode';\nimport ToggleButton from './ToggleButton';\nimport SettingStretch from './SettingStretch';\nimport SettingDirection from './SettingDirection';\nimport SettingFullscreen from './SettingFullscreen';\nimport { IconButtonAnimate, varFade } from '../animate';\nimport SettingColorPresets from './SettingColorPresets';\n\n// ----------------------------------------------------------------------\n\nconst RootStyle = styled(m.div)(({ theme }) => ({\n ...cssStyles(theme).bgBlur({ color: theme.palette.background.paper }),\n top: 0,\n right: 0,\n bottom: 0,\n display: 'flex',\n position: 'fixed',\n overflow: 'hidden',\n width: DRAWER_WIDTH,\n flexDirection: 'column',\n margin: theme.spacing(2),\n paddingBottom: theme.spacing(3),\n zIndex: theme.zIndex.drawer + 3,\n borderRadius: Number(theme.shape.borderRadius) * 1.5,\n boxShadow: `-24px 12px 32px -4px ${alpha(\n theme.palette.mode === 'light' ? theme.palette.grey[600] : theme.palette.common.black,\n 0.16\n )}`,\n}));\n\n// ----------------------------------------------------------------------\n\nexport default function Settings() {\n const { themeMode, themeDirection, themeColorPresets, themeStretch, onResetSetting } = useSettings();\n const [open, setOpen] = useState(false);\n\n const notDefault =\n themeMode !== defaultSettings.themeMode ||\n themeDirection !== defaultSettings.themeDirection ||\n themeColorPresets !== defaultSettings.themeColorPresets ||\n themeStretch !== defaultSettings.themeStretch;\n\n const varSidebar =\n themeDirection !== 'rtl'\n ? varFade({\n distance: DRAWER_WIDTH,\n durationIn: 0.32,\n durationOut: 0.32,\n }).inRight\n : varFade({\n distance: DRAWER_WIDTH,\n durationIn: 0.32,\n durationOut: 0.32,\n }).inLeft;\n\n useEffect(() => {\n if (open) {\n document.body.style.overflow = 'hidden';\n } else {\n document.body.style.overflow = 'unset';\n }\n }, [open]);\n\n const handleToggle = () => {\n setOpen((prev) => !prev);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n <>\n theme.zIndex.drawer + 1 }}\n />\n\n {!open && }\n\n \n {open && (\n <>\n \n \n Settings\n \n \n \n \n \n \n \n
\n \n\n \n\n \n \n \n Mode\n \n \n\n \n Direction\n \n \n\n \n Stretch\n \n \n\n \n \n \n \n \n )}\n \n \n );\n}\n","import PropTypes from 'prop-types';\nimport { useEffect } from 'react';\n// rtl\nimport rtlPlugin from 'stylis-plugin-rtl';\n// emotion\nimport createCache from '@emotion/cache';\nimport { CacheProvider } from '@emotion/react';\n// @mui\nimport { useTheme } from '@mui/material/styles';\n\n// ----------------------------------------------------------------------\n\nRtlLayout.propTypes = {\n children: PropTypes.node,\n};\n\nexport default function RtlLayout({ children }) {\n const theme = useTheme();\n\n useEffect(() => {\n document.dir = theme.direction;\n }, [theme.direction]);\n\n const cacheRtl = createCache({\n key: theme.direction === 'rtl' ? 'rtl' : 'css',\n stylisPlugins: theme.direction === 'rtl' ? [rtlPlugin] : [],\n });\n\n return {children};\n}\n","import { useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\n\n// ----------------------------------------------------------------------\n\nexport default function ScrollToTop() {\n const { pathname } = useLocation();\n\n useEffect(() => {\n window.scrollTo(0, 0);\n }, [pathname]);\n\n return null;\n}\n","import { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { SnackbarProvider } from 'notistack';\n// @mui\nimport { alpha, useTheme } from '@mui/material/styles';\nimport { Box, GlobalStyles } from '@mui/material';\n//\nimport Iconify from './Iconify';\nimport { IconButtonAnimate } from './animate';\n\n// ----------------------------------------------------------------------\n\nfunction SnackbarStyles() {\n const theme = useTheme();\n const isLight = theme.palette.mode === 'light';\n\n return (\n \n );\n}\n\n// ----------------------------------------------------------------------\n\nNotistackProvider.propTypes = {\n children: PropTypes.node,\n};\n\nexport default function NotistackProvider({ children }) {\n const notistackRef = useRef(null);\n\n const onClose = (key) => () => {\n notistackRef.current.closeSnackbar(key);\n };\n\n return (\n <>\n \n\n ,\n success: ,\n warning: ,\n error: ,\n }}\n // With close as default\n action={(key) => (\n \n \n \n )}\n >\n {children}\n \n \n );\n}\n\n// ----------------------------------------------------------------------\n\nSnackbarIcon.propTypes = {\n icon: PropTypes.string,\n color: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error']),\n};\n\nfunction SnackbarIcon({ icon, color }) {\n return (\n alpha(theme.palette[color].main, 0.16),\n }}\n >\n \n \n );\n}\n","import PropTypes from 'prop-types';\nimport { useMemo } from 'react';\n// @mui\nimport { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';\n// hooks\nimport useSettings from '../hooks/useSettings';\n//\nimport componentsOverride from '../theme/overrides';\n\n// ----------------------------------------------------------------------\n\nThemeColorPresets.propTypes = {\n children: PropTypes.node,\n};\n\nexport default function ThemeColorPresets({ children }) {\n const defaultTheme = useTheme();\n const { setColor } = useSettings();\n\n const themeOptions = useMemo(\n () => ({\n ...defaultTheme,\n palette: {\n ...defaultTheme.palette,\n primary: setColor,\n },\n customShadows: {\n ...defaultTheme.customShadows,\n primary: `0 8px 16px 0 ${alpha(setColor.main, 0.24)}`,\n },\n }),\n [setColor, defaultTheme]\n );\n\n const theme = createTheme(themeOptions);\n theme.components = componentsOverride(theme);\n\n return {children};\n}\n","import PropTypes from 'prop-types';\nimport { Link as RouterLink } from 'react-router-dom';\n// @mui\nimport { useTheme } from '@mui/material/styles';\nimport { Box } from '@mui/material';\n\n// ----------------------------------------------------------------------\n\nLogoLarge.propTypes = {\n disabledLink: PropTypes.bool,\n sx: PropTypes.any,\n};\n\nexport default function LogoLarge({ ...other }) {\n return ;\n}\n","// @mui\nimport { alpha, styled } from '@mui/material/styles';\nimport { Box, Typography, Typograpy, Stack } from '@mui/material';\n\nimport LogoLarge from './LogoLarge';\n\nimport useSettings from '../hooks/useSettings';\n\nconst ErrorContainer = styled('div')(({ theme }) => ({\n position: 'absolute',\n width: '100%',\n height: '100%',\n // backgroundColor: 'red',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n}));\nconst RootStyle = styled('div')(({ theme }) => ({\n width: 600,\n\n position: 'absolute',\n\n backgroundColor: theme.palette.background.default,\n borderColor: '#ff6600',\n borderStyle: 'solid',\n borderWidth: 4,\n borderRadius: 20,\n padding: 30,\n}));\n\nconst AppLoadErrorMessage = () => {\n const { themeMode } = useSettings();\n\n return (\n \n \n \n Graffle Management Dashboard\n \n \n \n \n An error occurred while attempting to retrieve the data for your companies. Please refresh the page and try\n again. If this problem persists, please contact us on the Graffle Discord server.\n \n \n \n \n );\n};\n\nexport default AppLoadErrorMessage;\n","import { useEffect, useState } from 'react';\n\n// routes\nimport Router from './routes';\n\n// Contexts\nimport useAppData from './hooks/useAppData';\n// theme\nimport ThemeProvider from './theme';\nimport GlobalStyles from './theme/globalStyles';\n// components\nimport Settings from './components/settings';\nimport RtlLayout from './components/RtlLayout';\nimport ScrollToTop from './components/ScrollToTop';\nimport { ProgressBarStyle } from './components/ProgressBar';\nimport NotistackProvider from './components/NotistackProvider';\nimport ThemeColorPresets from './components/ThemeColorPresets';\nimport MotionLazyContainer from './components/animate/MotionLazyContainer';\n\nimport LoadingScreen from './components/LoadingScreen';\nimport AppLoadErrorMessage from './components/AppLoadErrorMessage';\n\n// ----------------------------------------------------------------------\n\nif (localStorage.getItem('env') === null) {\n localStorage.setItem('env', 'testnet');\n}\n\nexport default function App() {\n const { loading, initError } = useAppData();\n\n // useEffect(() => {}, [loading])\n\n return (\n \n \n \n \n \n {initError && }\n {!loading && !initError && (\n <>\n \n \n \n \n \n \n )}\n {loading && !initError && }\n \n \n \n \n \n );\n}\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://cra.link/PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(/^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://cra.link/PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then((registration) => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://cra.link/PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch((error) => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' }\n })\n .then((response) => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log('No internet connection found. App is running in offline mode.');\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then((registration) => {\n registration.unregister();\n })\n .catch((error) => {\n console.error(error.message);\n });\n }\n}\n","const reportWebVitals = (onPerfEntry) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","// scroll bar\nimport 'simplebar/src/simplebar.css';\n\n// lazy image\nimport 'react-lazy-load-image-component/src/effects/blur.css';\nimport 'react-lazy-load-image-component/src/effects/opacity.css';\nimport 'react-lazy-load-image-component/src/effects/black-and-white.css';\n\nimport ReactDOM from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\nimport { HelmetProvider } from 'react-helmet-async';\n\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { LocalizationProvider } from '@mui/x-date-pickers';\n\n// redux\nimport { Provider as ReduxProvider } from 'react-redux';\nimport { PersistGate } from 'redux-persist/lib/integration/react';\nimport { store, persistor } from './redux/store';\n// contexts\nimport { SettingsProvider } from './contexts/SettingsContext';\nimport { CollapseDrawerProvider } from './contexts/CollapseDrawerContext';\nimport { AuthProvider } from './contexts/Auth0Context';\nimport { AppDataProvider } from './contexts/AppDataContext';\n//\nimport App from './App';\nimport * as serviceWorkerRegistration from './serviceWorkerRegistration';\nimport reportWebVitals from './reportWebVitals';\n\n// ----------------------------------------------------------------------\n\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ,\n document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://cra.link/PWA\nserviceWorkerRegistration.unregister();\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n","// ----------------------------------------------------------------------\n\nfunction path(root, sublink) {\n return `${root}${sublink}`;\n}\n\nconst ROOTS_AUTH = '/auth';\nconst ROOTS_DASHBOARD = '';\n\n// ----------------------------------------------------------------------\n\nexport const PATH_AUTH = {\n root: ROOTS_AUTH,\n login: path(ROOTS_AUTH, '/login'),\n loginUnprotected: path(ROOTS_AUTH, '/login-unprotected'),\n register: path(ROOTS_AUTH, '/register'),\n registerUnprotected: path(ROOTS_AUTH, '/register-unprotected'),\n resetPassword: path(ROOTS_AUTH, '/reset-password'),\n verify: path(ROOTS_AUTH, '/verify'),\n};\n\nexport const PATH_PAGE = {\n comingSoon: '/coming-soon',\n maintenance: '/maintenance',\n pricing: '/pricing',\n payment: '/payment',\n about: '/about-us',\n contact: '/contact-us',\n faqs: '/faqs',\n page404: '/404',\n page500: '/500',\n components: '/components',\n};\n\nexport const PATH_DASHBOARD = {\n root: ROOTS_DASHBOARD,\n general: {\n app: path(ROOTS_DASHBOARD, '/dashboard'),\n ecommerce: path(ROOTS_DASHBOARD, '/ecommerce'),\n analytics: path(ROOTS_DASHBOARD, '/analytics'),\n banking: path(ROOTS_DASHBOARD, '/banking'),\n booking: path(ROOTS_DASHBOARD, '/booking'),\n },\n projects: {\n root: path(ROOTS_DASHBOARD, '/projects'),\n },\n events: {\n root: path(ROOTS_DASHBOARD, '/events'),\n },\n webhooklogs: {\n root: path(ROOTS_DASHBOARD, '/webhooks'),\n detail: path(ROOTS_DASHBOARD, '/webhooks/details/:webhooklogid'),\n replay: path(ROOTS_DASHBOARD, 'webhooks/replay'),\n },\n company: {\n root: path(ROOTS_DASHBOARD, '/company'),\n },\n analytics: {\n root: path(ROOTS_DASHBOARD, '/analytics'),\n },\n mail: {\n root: path(ROOTS_DASHBOARD, '/mail'),\n all: path(ROOTS_DASHBOARD, '/mail/all'),\n },\n chat: {\n root: path(ROOTS_DASHBOARD, '/chat'),\n new: path(ROOTS_DASHBOARD, '/chat/new'),\n conversation: path(ROOTS_DASHBOARD, '/chat/:conversationKey'),\n },\n calendar: path(ROOTS_DASHBOARD, '/calendar'),\n kanban: path(ROOTS_DASHBOARD, '/kanban'),\n user: {\n root: path(ROOTS_DASHBOARD, '/user'),\n profile: path(ROOTS_DASHBOARD, '/user/profile'),\n cards: path(ROOTS_DASHBOARD, '/user/cards'),\n list: path(ROOTS_DASHBOARD, '/user/list'),\n newUser: path(ROOTS_DASHBOARD, '/user/new'),\n editById: path(ROOTS_DASHBOARD, `/user/reece-chung/edit`),\n account: path(ROOTS_DASHBOARD, '/user/account'),\n },\n eCommerce: {\n root: path(ROOTS_DASHBOARD, '/e-commerce'),\n shop: path(ROOTS_DASHBOARD, '/e-commerce/shop'),\n product: path(ROOTS_DASHBOARD, '/e-commerce/product/:name'),\n productById: path(ROOTS_DASHBOARD, '/e-commerce/product/nike-air-force-1-ndestrukt'),\n list: path(ROOTS_DASHBOARD, '/e-commerce/list'),\n newProduct: path(ROOTS_DASHBOARD, '/e-commerce/product/new'),\n editById: path(ROOTS_DASHBOARD, '/e-commerce/product/nike-blazer-low-77-vintage/edit'),\n checkout: path(ROOTS_DASHBOARD, '/e-commerce/checkout'),\n invoice: path(ROOTS_DASHBOARD, '/e-commerce/invoice'),\n },\n blog: {\n root: path(ROOTS_DASHBOARD, '/blog'),\n posts: path(ROOTS_DASHBOARD, '/blog/posts'),\n post: path(ROOTS_DASHBOARD, '/blog/post/:title'),\n postById: path(ROOTS_DASHBOARD, '/blog/post/apply-these-7-secret-techniques-to-improve-event'),\n newPost: path(ROOTS_DASHBOARD, '/blog/new-post'),\n },\n};\n\nexport const PATH_DOCS = 'https://docs-minimals.vercel.app/introduction';\n","import { useContext } from 'react';\n\nimport { AppDataContext } from '../contexts/AppDataContext';\n\n// ----------------------------------------------------------------------\n\nconst useAppData = () => {\n const context = useContext(AppDataContext);\n\n if (!context) throw new Error('App Data context must be use inside AppDataProvider');\n\n return context;\n};\n\nexport default useAppData;\n","import { alpha } from '@mui/material/styles';\n\n// ----------------------------------------------------------------------\n\nfunction getDirection(value = 'bottom') {\n return {\n top: 'to top',\n right: 'to right',\n bottom: 'to bottom',\n left: 'to left'\n }[value];\n}\n\nexport default function cssStyles(theme) {\n return {\n bgBlur: (props) => {\n const color = props?.color || theme?.palette.background.default || '#000000';\n\n const blur = props?.blur || 6;\n const opacity = props?.opacity || 0.8;\n\n return {\n backdropFilter: `blur(${blur}px)`,\n WebkitBackdropFilter: `blur(${blur}px)`, // Fix on Mobile\n backgroundColor: alpha(color, opacity)\n };\n },\n bgGradient: (props) => {\n const direction = getDirection(props?.direction);\n const startColor = props?.startColor || `${alpha('#000000', 0)} 0%`;\n const endColor = props?.endColor || '#000000 75%';\n\n return {\n background: `linear-gradient(${direction}, ${startColor}, ${endColor});`\n };\n },\n bgImage: (props) => {\n const url = props?.url || 'https://minimal-assets-api.vercel.app/assets/images/bg_gradient.jpg';\n const direction = getDirection(props?.direction);\n const startColor = props?.startColor || alpha(theme?.palette.grey[900] || '#000000', 0.88);\n const endColor = props?.endColor || alpha(theme?.palette.grey[900] || '#000000', 0.88);\n\n return {\n background: `linear-gradient(${direction}, ${startColor}, ${endColor}), url(${url})`,\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center center'\n };\n }\n };\n}\n","// @mui\nimport { useTheme } from '@mui/material/styles';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\n// ----------------------------------------------------------------------\n\nexport default function useResponsive(query, key, start, end) {\n const theme = useTheme();\n\n const mediaUp = useMediaQuery(theme.breakpoints.up(key));\n\n const mediaDown = useMediaQuery(theme.breakpoints.down(key));\n\n const mediaBetween = useMediaQuery(theme.breakpoints.between(start, end));\n\n const mediaOnly = useMediaQuery(theme.breakpoints.only(key));\n\n if (query === 'up') {\n return mediaUp;\n }\n\n if (query === 'down') {\n return mediaDown;\n }\n\n if (query === 'between') {\n return mediaBetween;\n }\n\n if (query === 'only') {\n return mediaOnly;\n }\n return null;\n}\n"],"sourceRoot":""}