\n {children}\n
\n \n \n setIsOpen(true)}\n >\n
\n \n
\n \n \n );\n};\n\nexport default Settings;\n","import React from \"react\";\nimport { Outlet } from \"react-router-dom\";\n\nimport { Col, Container, Row } from \"react-bootstrap\";\n\nimport Main from \"../components/Main\";\nimport Settings from \"../components/Settings\";\n\nconst Auth = ({ children }) => (\n \n
\n
\n
\n
\n \n setIsOpen(false)}\n >\n
\n Theme Builder
\n\n \n \n\n
\n \n Hey there! Set your own customized style below.\n Choose the ones that best fits your needs.\n
\n \n Color scheme\n \n The perfect color mode for your app.\n \n
\n \n {themeOptions.map(({ name, value }) => (\n
\n ))}\n \n
\n \n {name}\n \n
\n \n Sidebar position\n \n \n Toggle the position of the sidebar.\n \n
\n \n {sidebarPositionOptions.map(({ name, value }) => (\n \n ))}\n
\n \n
\n \n Sidebar behavior\n \n \n Change the behavior of the sidebar.\n \n
\n \n {sidebarBehaviorOptions.map(({ name, value }) => (\n \n ))}\n
\n \n
\n Layout\n \n Toggle container layout system.\n \n
\n \n {layoutOptions.map(({ name, value }) => (\n \n ))}\n
\n \n
\n \n \n Purchase\n \n
\n {children}
;\n\nexport default Wrapper;\n","import { useDispatch } from \"react-redux\";\n\n// Use throughout your app instead of plain `useDispatch`\nconst useAppDispatch = () => useDispatch();\n\nexport default useAppDispatch;\n","import React from \"react\";\n\nconst SidebarFooter = () => {\n return (\n \n
\n );\n};\n\nexport default SidebarFooter;\n","/* eslint-disable jsx-a11y/anchor-is-valid */\nimport React, { forwardRef } from \"react\";\nimport { NavLink } from \"react-router-dom\";\n\nimport { Badge, Collapse } from \"react-bootstrap\";\n\nconst CustomRouterLink = forwardRef((props, ref) => (\n \n Monthly Sales Report\n
\n \n Your monthly sales report is ready for download!\n
\n\n \n \n Download\n \n
\n - {children}
- \n {items &&\n items.map((item) => (\n
Sema Communications Portal
\n\n
\n Loading...
\n\n
\n \n {count} {header}\n
\n {title}
\n {description}
\n {time}
\n \n {children}
;\n\nexport default Content;\n","import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\n\nconst Footer = () => (\n \n);\n\nexport default Footer;\n","import React from \"react\";\nimport { Outlet } from \"react-router-dom\";\n\nimport Wrapper from \"../components/Wrapper\";\nimport Sidebar from \"../components/sidebar/Sidebar\";\nimport Main from \"../components/Main\";\nimport Navbar from \"../components/navbar/Navbar\";\nimport Content from \"../components/Content\";\nimport Footer from \"../components/Footer\";\nimport Settings from \"../components/Settings\";\nimport { useSelector } from \"react-redux\";\n\nimport dashboardItems from \"../components/sidebar/dashboardItems\";\nimport airtimeItems from \"../components/sidebar/airtimeItems\";\nconst Dashboard = ({ children }) => {\n const currentService = useSelector((state) => state.sema_services.value);\n const items = currentService.items;\n var loadedItems = null;\n switch (items) {\n case \"dashboardItems\":\n loadedItems = dashboardItems;\n break;\n case \"airtimeItems\":\n loadedItems = airtimeItems;\n break;\n default:\n loadedItems = dashboardItems;\n }\n return (\n Dashboard
\n \n\n\n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n \n
\n \n
\n \n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n | SMS Status | \nSMS Count | \nParts Count | \nBilled Amount | \nCurrency | \n
|---|---|---|---|---|
| Delivered | \n01/01/2021 | \n31/06/2021 | \n\n | \n Carl Jenkins | \n
| Undeliverable | \n01/01/2021 | \n31/06/2021 | \n\n | \n Bertha Martin | \n
| Acknowledge | \n01/01/2021 | \n31/06/2021 | \n\n | \n Stacie Hall | \n
| Expired | \n01/01/2021 | \n31/06/2021 | \n\n | \n Carl Jenkins | \n
| Accepted | \n01/01/2021 | \n31/06/2021 | \n\n | \n Bertha Martin | \n
| Rejected | \n01/01/2021 | \n31/06/2021 | \n\n | \n Ashley Briggs | \n
| Unknown | \n01/01/2021 | \n31/06/2021 | \n\n | \n Bertha Martin | \n
| Failed | \n01/01/2021 | \n31/06/2021 | \n\n | \n Stacie Hall | \n
| DND | \n01/01/2021 | \n31/06/2021 | \n\n | \n Stacie Hall | \n
| None | \n01/01/2021 | \n31/06/2021 | \n\n | \n Stacie Hall | \n
| Enroute | \n01/01/2021 | \n31/06/2021 | \n\n | \n Stacie Hall | \n
| Deleted | \n01/01/2021 | \n31/06/2021 | \n\n | \n Stacie Hall | \n
| Submitted | \n01/01/2021 | \n31/06/2021 | \n\n | \n Stacie Hall | \n
| Total | \n01/01/2021 | \n31/06/2021 | \n\n | \n Stacie Hall | \n
\n
\n \n
\n {props.value}
\n{props.title}
\n\n \n +8.65%\n \n Since last week\n
\n \n
\n {icon}
\n \n
\n \n \n {t(\"Welcome back\")}, Chris!\n
\nAppStack Dashboard
\n\n
\n \n
\n 250
\nSMS Sent
\n\n \n +5.35%\n \n Since last week\n
\n \n
\n \n
\n \n
\n \n
\n 4300
\nCost
\n\n \n -4.25%\n \n Since last week\n
\n \n
\n \n
\n \n
\n \n
\n 58000
\nCurrent Balance
\n\n \n +8.65%\n \n Since last week\n
\n \n
\n \n
\n \n
\n \n
\n 58
\nTotal Contacts
\n\n \n +8.65%\n \n Since last week\n
\n \n
\n \n
\n \n Use striped to add zebra-striping to any table row within\n the <tbody>.\n
*/}\n | Transaction | \nAmount | \n\n Date\n | \n {/*Actions | */}\n
|---|---|---|---|
| CREDIT WAS ADDED | \nTZS 10000 | \nJune 21, 1961 | \n {/*\n | */}\n
| CREDIT WAS ADDED | \nTZS 25000 | \nMay 15, 1948 | \n {/*\n | */}\n
| CREDIT WAS ADDED | \nTZS 100000 | \nSeptember 14, 1965 | \n {/*\n | */}\n
| CREDIT WAS ADDED | \nTZS 59000 | \nApril 2, 1971 | \n {/*\n | */}\n
| CREDIT WAS ADDED | \nTZS 35000 | \nOctober 12, 1966 | \n {/*\n | */}\n
Analytics
\n \n\n\n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n \n
\n \n
\n \n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n | Language | \nUsers | \n% Users | \n
|---|---|---|
| en-us | \n735 | \n\n | \n
| en-gb | \n223 | \n\n | \n
| fr-fr | \n181 | \n\n | \n
| es-es | \n132 | \n\n | \n
| de-de | \n118 | \n\n | \n
| ru-ru | \n98 | \n\n | \n
\n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n \n \n \n
\n
\n \n
\n\n \n
\n | Source | \nRevenue | \nValue | \n
|---|---|---|
| \n | \n $ 2602 | \n+43% | \n
| \n | \n $ 1253 | \n+13% | \n
| \n | \n $ 541 | \n+24% | \n
| \n | \n $ 1465 | \n+11% | \n
\n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n \n
\n \n
\n \n \n \n \n \n
\n \n \n \n \n \n \n
\n 2.364\n \n \n \n \n \n \n
\n 1.856\n \n \n \n \n \n \n
\n 17.212\n \n \n \n
\n
\n );\n};\n\nexport default Statistics;\n","import React from \"react\";\n\nimport { Card, Dropdown, Table } from \"react-bootstrap\";\n\nimport { MoreHorizontal } from \"react-feather\";\n\nconst Traffic = () => (\n \n
\n \n \n {t(\"Welcome back\")}, Chris!\n
\nAppStack Dashboard
\nBounce
\n \n\n\n
\n \n \n \n +3.65%\n \n Since last week\n
\n Real-Time
\n \n\n\n
\n \n \n \n +2.25%\n \n Since last week\n
\n Visitors
\n \n\n\n
\n \n \n \n -1.25%\n \n Since last week\n
\n \n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n | Source | \nUsers | \nSessions | \nBounce Rate | \n\n Avg. Session Duration\n | \n
|---|---|---|---|---|
| 1023 | \n1265 | \n\n 27.23%\n | \n00:06:25 | \n|
| Bing | \n504 | \n623 | \n\n 66.76%\n | \n00:04:42 | \n
| 462 | \n571 | \n\n 31.53%\n | \n00:08:05 | \n|
| 623 | \n770 | \n\n 52.81%\n | \n00:03:10 | \n|
| 812 | \n1003 | \n\n 24.83%\n | \n00:05:56 | \n|
| DuckDuckGo | \n693 | \n856 | \n\n 37.36%\n | \n00:09:12 | \n
| GitHub | \n713 | \n881 | \n\n 38.09%\n | \n00:06:19 | \n
| 412 | \n508 | \n\n 17.09%\n | \n00:04:23 | \n|
| Direct | \n872 | \n1077 | \n\n 32.70%\n | \n00:09:18 | \n
\n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n \n
\n \n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n - \n
- \n Delivered\n
2 hours ago
\n \n - \n Pick Up\n
6 hours ago
\n \n - \n In Transit\n
1 days ago
\n \n - \n Dispatched\n
3 days ago
\n \n - \n Order Received\n
4 days ago
\n \n
\n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n \n
\n \n
\n SaaS
\n \n\n\n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n | Name | \nTech | \nLicense | \nTickets | \nSales | \n
|---|---|---|---|---|
| Abel Theme | \n\n | \n Single license | \n80 | \n150 | \n
| Ada Theme | \n\n | \n Single license | \n60 | \n610 | \n
| AppStack Theme | \n\n | \n Single license | \n50 | \n720 | \n
| Libre Theme | \n\n | \n Single license | \n30 | \n280 | \n
| Material Blog Theme | \n\n | \n Single license | \n10 | \n480 | \n
| Milo Theme | \n\n | \n Single license | \n40 | \n280 | \n
| Spark Theme | \n\n | \n Single license | \n20 | \n480 | \n
| Von Theme | \n\n | \n Single license | \n50 | \n350 | \n
Income
\n \n\n\n
\n \n \n \n 6.25%\n \n Since last week\n
\n Orders
\n \n\n\n
\n \n \n \n -4.65%{\" \"}\n \n Since last week\n
\n Activity
\n \n\n\n
\n \n \n \n 8.35%\n \n Since last week\n
\n \n
\n \n Welcome Back, Chris!
\nAppStack Dashboard
\n\n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n \n
\n \n
\n\n \n 5m ago\n \n 
\n \n 
\n \n
\n\n Today 7:51 pm\n
\n \n\n
\n \n Ashley Briggs\n
\n\n Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem\n quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam\n quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.\n Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut\n libero venenatis faucibus.\n
\n\n\n \n \n \n \n \n\n
\n
\n \n
\n \n
\n \n Stacie Hall: Nam pretium turpis et arcu. Duis\n arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis,\n ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan\n a, consectetuer eget, posuere ut, mauris.\n
\n\n
\n
\n\n \n 30m ago\n
\n \n
\n \n Chris Wood\n
\n\n Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem\n quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam\n quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.\n Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut\n libero venenatis faucibus. Nullam quis ante.\n
\n Today 7:21 pm\n\n \n
\n
\n
\n\n \n 3h ago\n 
\n\n Today 5:12 pm\n
\n \n\n
\n \n Carl Jenkins\n
\n\n\n\n Today 5:12 pm\n \n \n\n
\n
\n \n
\n \n
\n \n Stacie Hall: Nam pretium turpis et arcu. Duis\n arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis,\n ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan\n a, consectetuer eget, posuere ut, mauris.\n
\n\n
\n
\n \n 4h ago\n
\n \n
\n \n Ashley Briggs\n
\n\n Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem\n quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam\n quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.\n Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut\n libero venenatis faucibus. Nullam quis ante.\n
\n Today 4:21 pm\n\n \n
UX Engineer
\n\n \n {\" \"}\n \n
\n \n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n \n
\n\n \n
\n \n Ashley Briggs\n
\n \n\n\n
\n
\n\n \n
\n \n Carl Jenkins\n
\n \n\n\n
\n
\n \n
\n \n Stacie Hall\n
\n \n\n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n \n
\n\n \n 5m ago\n Ashley Briggs started following{\" \"}\n Stacie Hall\n
\n Today 7:51 pm\n
\n
\n \n Today 7:51 pm\n
\n
\n
\n
\n\n \n 30m ago\n Chris Wood posted something on{\" \"}\n Stacie Hall's timeline\n
\n Today 7:21 pm\n
\n \n Today 7:21 pm\n
\n Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem\n quam..\n
\n \n
\n
\n\n \n 1h ago\n Stacie Hall posted a new blog\n
\n Today 6:35 pm\n
\n \n Today 6:35 pm\n
\n
\n
\n\n \n 3h ago\n Carl Jenkins posted two photos on{\" \"}\n Stacie Hall's timeline\n
\n Today 5:12 pm\n
\n \n Today 5:12 pm\n
\n
\n \n \n
\n \n \n \n
\n \n \n
\n
\n\n \n 1d ago\n Stacie Hall posted a new blog\n
\n Yesterday 2:43 pm\n
\n \n Yesterday 2:43 pm\n
\n
\n
\n\n \n 1d ago\n Chris Wood started following{\" \"}\n Stacie Hall\n
\n Yesterdag 1:51 pm\n
\n \n Yesterdag 1:51 pm\n
\n
\n \n
\n \n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n \n
\n Crypto
\n \n\n\n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n | Coin | \nPrice | \nVolume | \nChange | \n
|---|---|---|---|
| ETH | \n0.03863405 | \n1379.634 | \n\n +1.52\n | \n
| XRP | \n0.00009313 | \n270.805 | \n-3.30 | \n
| XMR | \n0.01292315 | \n203.531 | \n\n +6.10\n | \n
| DASH | \n0.02088992 | \n84.034 | \n-3.17 | \n
| LTC | \n0.00821501 | \n80.566 | \n\n +3.00\n | \n
| STR | \n0.00002948 | \n58.981 | \n\n +2.58\n | \n
| DOGE | \n0.00000061 | \n46.849 | \n-1.61 | \n
| REP | \n0.00223510 | \n37.038 | \n\n +0.54\n | \n
| EOS | \n0.00069000 | \n35.040 | \n-5.84 | \n
| DGB | \n0.00000277 | \n34.840 | \n\n +0.36\n | \n
| ZEC | \n0.01505000 | \n32.326 | \n-4.24 | \n
| BURST | \n0.00000098 | \n25.590 | \n\n -15.52\n | \n
| MAID | \n0.00003724 | \n20.556 | \n-2.33 | \n
| ETC | \n0.00132249 | \n19.633 | \n\n +4.19\n | \n
| STRAT | \n0.00028587 | \n17.557 | \n\n +4.40\n | \n
\n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n | Price | \nETH | \nBTC | \nSum(BTC) | \n
|---|---|---|---|
| 0.03892501 | \n32.07831558 | \n1.24864875 | \n1.26329659 | \n
| 0.03893754 | \n4.97546187 | \n0.19373225 | \n1.45702884 | \n
| 0.03895189 | \n0.00288098 | \n0.00011222 | \n1.45714106 | \n
| 0.03896593 | \n1.37722262 | \n0.05366476 | \n1.51080582 | \n
| 0.03897932 | \n7.91612747 | \n0.30856527 | \n1.81937109 | \n
| 0.03897933 | \n0.32745500 | \n0.01276398 | \n1.83213507 | \n
| 0.03899180 | \n0.00758003 | \n0.00029556 | \n1.83243063 | \n
| 0.03899784 | \n2.05272745 | \n0.08005194 | \n1.91248257 | \n
| 0.03899998 | \n2.59143162 | \n0.10106578 | \n2.01354835 | \n
| 0.03899999 | \n3.00000000 | \n0.11699997 | \n2.13054832 | \n
\n \n \n \n \n Action \n Another Action \n Something else here \n \n \n
\n | Price | \nETH | \nBTC | \nSum(BTC) | \n
|---|---|---|---|
| 0.03892000 | \n0.22446452 | \n0.00873616 | \n0.00873616 | \n
| 0.03890500 | \n66.39390000 | \n2.58305468 | \n2.59179084 | \n
| 0.03890132 | \n56.55334798 | \n2.19999989 | \n4.79179073 | \n
| 0.03890053 | \n0.08285351 | \n0.00322305 | \n4.79501378 | \n
| 0.03889706 | \n15.61516705 | \n0.60738409 | \n5.40239787 | \n
| 0.03888117 | \n12.84070897 | \n0.49926179 | \n5.90165966 | \n
| 0.03885500 | \n0.99800000 | \n0.03877729 | \n5.94043695 | \n
| 0.03884325 | \n0.20552300 | \n0.00798318 | \n5.94842013 | \n
| 0.03883474 | \n7.58480860 | \n0.29455407 | \n6.24297420 | \n
| 0.03881616 | \n0.25000000 | \n0.00970404 | \n6.25267824 | \n
-5.28%
\n HSR/BTC
\n\n 0.001416 $16.61\n
\n Volume: 2,692.47 BTC
\n 2.61%
\n BNB/BTC
\n\n 0.00022004 $2.58\n
\n Volume: 842.52 BTC
\n -7.27%
\n POWR/BTC
\n\n 0.00005806 $0.68\n
\n Volume: 393.03 BTC
\n -4.98%
\n TRX/BTC
\n\n 0.00000229 $0.04\n
\n Volume: 6,836.31 BTC
\n 16.11%
\n IOTA/BTC
\n\n 0.00025800 $3.03\n
\n Volume: 14,065.87 BTC
\n Lead Developer
\n\n \n \n \n
\n \n\n
\n
- \n
- \n
Lives in{\" \"}\n San Francisco, SA\n \n\n - \n
Works at{\" \"}\n GitHub\n \n - \n
From{\" \"}\n Boston\n \n
\n
- \n
- \n
\n staciehall.co\n \n - \n
\n Twitter\n \n - \n
\n Facebook\n \n - \n
\n Instagram\n \n - \n
\n LinkedIn\n \n
\n
\n\n \n 5m ago\n Ashley Briggs started following{\" \"}\n Stacie Hall\n
\n Today 7:51 pm\n
\n
\n \n Today 7:51 pm\n
\n
\n
\n
\n\n \n 30m ago\n Chris Wood posted something on{\" \"}\n Stacie Hall's timeline\n
\n Today 7:21 pm\n
\n \n Today 7:21 pm\n
\n Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem\n quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam\n quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.\n Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut\n libero venenatis faucibus. Nullam quis ante.\n
\n \n \n
\n
\n\n \n 1h ago\n Stacie Hall posted a new blog\n
\n Today 6:35 pm\n
\n \n Today 6:35 pm\n
\n
\n
\n\n \n 3h ago\n Carl Jenkins posted two photos on{\" \"}\n Stacie Hall's timeline\n
\n Today 5:12 pm\n
\n \n Today 5:12 pm\n
\n
\n \n \n \n
\n \n \n \n
\n \n \n
\n
\n\n \n 1d ago\n Carl Jenkins started following{\" \"}\n Stacie Hall\n
\n Yesterday 3:12 pm\n
\n \n Yesterday 3:12 pm\n
\n
\n \n
\n \n Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id,\n lorem. Maecenas nec odio et ante tincidunt tempus.\n
\n \n
\n
\n\n \n 1d ago\n Stacie Hall posted a new blog\n
\n Yesterday 2:43 pm\n
\n \n Yesterday 2:43 pm\n
\n
\n
\n\n \n 1d ago\n Chris Wood started following{\" \"}\n Stacie Hall\n
\n Yesterdag 1:51 pm\n
\n \n Yesterdag 1:51 pm\n
\n
\n \n
\n Profile
\n\nSettings
\n\n| # | \nName | \nCompany | \nStatus | \n|
|---|---|---|---|---|
| \n | \n Angelica Ramos | \nThe Wiz | \nangelica@ramos.com | \n\n | \n
| \n | \n Ashton Cox | \nLevitz Furniture | \nashton@cox.com | \n\n | \n
| \n | \n Brenden Wagner | \nThe Wiz | \nbrenden@wagner.com | \n\n | \n
| \n | \n Charde Marshall | \nPrice Savers | \ncharde@marshall.com | \n\n | \n
| \n | \n Doris Wilder | \nRed Robin Stores | \ndoris@wilder.com | \n\n | \n
| \n | \n Fiona Green | \nThe Sample | \nfiona@green.com | \n\n | \n
| \n | \n Garrett Winters | \nGood Guys | \ngarrett@winters.com | \n\n | \n
| \n | \n Gavin Cortez | \nRed Robin Stores | \ngavin@cortez.com | \n\n | \n
| \n | \n Haley Kennedy | \nHelping Hand | \nhaley@kennedy.com | \n\n | \n
| \n | \n Howard Hatfield | \nPrice Savers | \nhoward@hatfield.com | \n\n | \n
| \n | \n Jena Gaines | \nHelping Hand | \njena@gaines.com | \n\n | \n
| \n | \n Jennifer Chang | \nHelping Hand | \njennifer@chang.com | \n\n | \n
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n
\n \n| Name | \nAngelica Ramos | \n
|---|---|
| Company | \nThe Wiz | \n
| angelica@ramos.com | \n|
| Phone | \n+1234123123123 | \n
| Status | \n\n | \n
\n\n Activity\n\n
- \n
- \n Signed out\n 30m ago\n
Nam pretium turpis et arcu. Duis arcu tortor, suscipit...
\n \n - \n Created invoice #1204\n 2h ago\n
Sed aliquam ultrices mauris. Integer ante arcu...
\n \n - \n Discarded invoice #1147\n 3h ago\n
Nam pretium turpis et arcu. Duis arcu tortor, suscipit...
\n \n - \n Signed in\n 3h ago\n
Curabitur ligula sapien, tincidunt non, euismod vitae...
\n \n - \n Signed up\n 2d ago\n
Sed aliquam ultrices mauris. Integer ante arcu...
\n \n
Clients
\n\n{description}
\n\n\n Progress{percentage}%\n
\nProjects
\n\nInvoice
\n\n\n Hello Chris Wood,\n
This is the receipt for a payment of \n $268.00\n {\" \"}\n (USD) you made to AppStack.\n
\n\n This is the receipt for a payment of \n $268.00\n {\" \"}\n (USD) you made to AppStack.\n
Payment No.
\n 741037024\n \n Payment Date
\n October 2, 2018 - 03:45 pm\n \n \n\n
Client
\n Chris Wood\n \n 4183 Forest Avenue
New York City
10011
USA{\" \"}\n
\n chris.wood@gmail.com\n
Payment To
\n AppStack LLC\n \n 354 Roy Alley
Denver
80202
USA
\n info@appstack.com\n
| Description | \nQuantity | \nAmount | \n
|---|---|---|
| AppStack Theme Customization | \n2 | \n$150.00 | \n
| Monthly Subscription | \n3 | \n$25.00 | \n
| Additional Service | \n1 | \n$100.00 | \n
| \n | Subtotal | \n$275.00 | \n
| \n | Shipping | \n$8.00 | \n
| \n | Discount | \n5% | \n
| \n | Total | \n$268.85 | \n
\n
\n \n Extra note: Please send all items at the same\n time to the shipping address. Thanks in advance.\n
\n\n \nPlans & Pricing
\n\nWe have a plan for everyone
\n\n Whether you're a business or an individual, 14-day trial no credit\n card required.\n
\n\n\n
\n Free
\n $0\nIncludes:
\n- \n
- 1 users \n
- 5 projects \n
- 5 GB storage \n
\n \n
\n \n
\n Standard
\n $19\n /mo\nIncludes:
\n- \n
- 5 users \n
- 50 projects \n
- 50 GB storage \n
- Security policy \n
- Weekly backups \n
\n \n
\n \n
\n Plus
\n $39\n /mo\nIncludes:
\n- \n
- Unlimited users \n
- Unlimited projects \n
- 250 GB storage \n
- Priority support \n
- Security policy \n
- Daily backups \n
- Custom CSS \n
\n \n
\n \n
\n Free
\n $0\nIncludes:
\n- \n
- 1 users \n
- 5 projects \n
- 5 GB storage \n
\n \n
\n \n
\n Standard
\n $199\n /mo\nIncludes:
\n- \n
- 5 users \n
- 50 projects \n
- 50 GB storage \n
- Security policy \n
- Weekly backups \n
\n \n
\n \n
\n Plus
\n $399\n /mo\nIncludes:
\n- \n
- Unlimited users \n
- Unlimited projects \n
- 250 GB storage \n
- Priority support \n
- Security policy \n
- Daily backups \n
- Custom CSS \n
\n \n
\n \n\n
\n
\n Frequently asked questions
\n\n Etiam rhoncus. Maecenas tempus, tellus eget condimentum\n rhoncus, sem quam semper libero, sit amet adipiscing sem\n neque sed ipsum. Nam quam nunc, blandit vel, luctus\n pulvinar, hendrerit id, lorem.\n
\n\n Etiam rhoncus. Maecenas tempus, tellus eget condimentum\n rhoncus, sem quam semper libero, sit amet adipiscing sem\n neque sed ipsum. Nam quam nunc, blandit vel, luctus\n pulvinar, hendrerit id, lorem.\n
\n\n Etiam rhoncus. Maecenas tempus, tellus eget condimentum\n rhoncus, sem quam semper libero, sit amet adipiscing sem\n neque sed ipsum. Nam quam nunc, blandit vel, luctus\n pulvinar, hendrerit id, lorem.\n
\n\n Etiam rhoncus. Maecenas tempus, tellus eget condimentum\n rhoncus, sem quam semper libero, sit amet adipiscing sem\n neque sed ipsum. Nam quam nunc, blandit vel, luctus\n pulvinar, hendrerit id, lorem.\n
\n\n Nam pretium turpis et arcu. Duis arcu.\n
\n{children}
\n \n \n
\n \n
\n {text}
\n\n
\n \n Tasks
\n\n\n \n
\n \n);\n\nconst Chat = () => (\n \n
\n {time}
\n {name}
\n {children}\n Messages
\n\n\n
\n \n
\n \n
\n \n
\n \n Ashley Briggs\n
\n \n
\n \n
\n \n Carl Jenkins\n
\n \n
\n \n
\n \n Bertha Martin\n
\n \n
\n \n
\n \n Stacie Hall\n
\n \n
\n \n
\n \n Fiona Green\n
\n \n
\n \n
\n \n Doris Wilder\n
\n \n
\n \n
\n \n Haley Kennedy\n
\n \n
\n \n
\n \n Jennifer Chang\n
\n \n
\n \n \n
\n
\n\n \n
\n \n
\n \n Bertha Martin\n
\n \n Typing...\n
\n \n \n \n \n \n \n
\n \n
\n\n \n \n Lorem ipsum dolor sit amet, vis erat denique in, dicunt\n prodesset te vix.\n \n\n \n Sit meis deleniti eu, pri vidit meliore docendi ut, an eum\n erat animal commodo.\n \n\n \n Cum ea graeci tractatos.\n \n\n \n Sed pulvinar, massa vitae interdum pulvinar, risus lectus\n porttitor magna, vitae commodo lectus mauris et velit. Proin\n ultricies placerat imperdiet. Morbi varius quam ac venenatis\n tempus.\n \n\n \n Cras pulvinar, sapien id vehicula aliquet, diam velit\n elementum orci.\n \n\n \n Lorem ipsum dolor sit amet, vis erat denique in, dicunt\n prodesset te vix.\n \n\n \n Sit meis deleniti eu, pri vidit meliore docendi ut, an eum\n erat animal commodo.\n \n\n \n Cum ea graeci tractatos.\n \n\n \n Morbi finibus, lorem id placerat ullamcorper, nunc enim\n ultrices massa, id dignissim metus urna eget purus.\n \n\n \n Sed pulvinar, massa vitae interdum pulvinar, risus lectus\n porttitor magna, vitae commodo lectus mauris et velit. Proin\n ultricies placerat imperdiet. Morbi varius quam ac venenatis\n tempus.\n \n\n \n Lorem ipsum dolor sit amet, vis erat denique in, dicunt\n prodesset te vix.\n \n\n \n Sit meis deleniti eu, pri vidit meliore docendi ut, an eum\n erat animal commodo.\n \n
\n \n \n \n
\n \n Blank Page
\n\n\n
\n\n Features you'll love
\n\n A responsive dashboard built for your award ceremonies.\n
\n\n
\n \n \n
\n \n
\n Contact List Management
\n\n This management system offers a platform for your voters to\n cast their votes, and an administrative dashbaord to oversee\n the award process\n
\n\n
\n \n \n
\n \n
\n Detailed Statistics
\n\n With mobile, tablet & desktop support it doesn't matter what\n device you're using. The system is responsive in all\n browsers.\n
\n\n
\n \n \n
\n \n
\n Support
\n\n Our team would love to here from you. We welcome any new\n ideas.\n
\n\n
\n \n \n
\n \n
\n Secure
\n\n The voting management system securely stores voting, voters,\n and administrative user information.\n
\n\n
\n \n \n
\n \n
\n Reliable Documentation
\n\n We strictly follow the development guidelines to make your\n voting process smooth and go according to plan\n
\n\n
\n \n \n \n
\n \n
\n Regular Updates
\n\n From time to time you'll receive an updates containing new\n security and more advanced features\n
\nSema Dashboard
\n\n\n A communication platform for better serving marketers and\n business owners with a way of connecting with their customers.\n
\n\n {/*\n
*/}\n \n
\n 500+
\n UI Components\n\n
\n 1500+
\n SVG Icons\n\n
\n 45+
\n Pages\n\n \n Login to Dashboard\n \n \n Create an Account\n \n
\n \n \n {/*
\n \n {alertElements.title}
\n{alertElements.message}
\nQuick SMS
\n\n Some subtitle goes here\n
\nContact List
\n\n\n Create a Contact List\n
\nContact List (Range)
\n\n\n Create a Contact List\n
\nFile Upload
\n\n\n Upload phone numbers stored in a file\n
\nIncoming SMS
\n\n All messages received today\n
\n | # | \nChannel | \nPhone number | \nKeyword | \nText | \nPrice | \nRecieved Date | \n
|---|---|---|---|---|---|---|
| 1 | \nChannel 1 | \n255624327900 | \nSema | \nsome text | \nTZS 20 | \nNovember, 3rd 2021 | \n
| 2 | \nChannel 2 | \n2551884011933 | \nSema | \nsome text | \nTZS 30 | \nNovember, 2nd 2021 | \n
| 3 | \nChannel 2 | \n255692463373 | \nAIM | \nsome other text | \nTZS 20 | \nOctober, 31st 2021 | \n
Sms Inbox
\n\nAll inbound sms
\nSender IDs
\nList of Requested/Abailable Sender IDs
\n| # | \nStatus | \nCountry | \nSender ID | \nRemarks | \nCreated | \nApproved | \n
|---|---|---|---|---|---|---|
| 1 | \nInactive | \nTanzania | \nSema | \nsome text | \nMarch, 23rd 2020 | \nNO | \n
| 2 | \nActive | \nTanzania | \nAIMFIRMS | \nsome text | \nMarch, 23rd 2020 | \nYES | \n
| 3 | \nActive | \nTanzania | \nINFO | \nsome other text | \nMarch, 23rd 2020 | \nYES | \n
\n
\n );\n },\n },\n {\n Header: \"Airtel\",\n accessor: \"airtel\",\n Cell: ({ row, column, value }) => {\n return (\n \n
\n );\n },\n },\n {\n Header: \"Halotel\",\n accessor: \"halotel\",\n Cell: ({ row, column, value }) => {\n return (\n \n
\n );\n },\n },\n {\n Header: \"Zantel\",\n accessor: \"zantel\",\n Cell: ({ row, column, value }) => {\n return (\n \n
\n );\n },\n },\n {\n Header: \"TTCL\",\n accessor: \"ttcl\",\n Cell: ({ row, column, value }) => {\n return (\n \n
\n );\n },\n },\n {\n Header: \"Tigo\",\n accessor: \"tigo\",\n Cell: ({ row, column, value }) => {\n return (\n \n
\n );\n },\n },\n {\n Header: \"Smile\",\n accessor: \"smile\",\n Cell: ({ row, column, value }) => {\n return (\n \n
\n );\n },\n },\n ],\n []\n );\n\n const data = React.useMemo(() => mnoData, [mnoData]);\n const { getTableProps, getTableBodyProps, headerGroups, prepareRow, rows } =\n useTable({ columns, data });\n // let registered_networks = [{ vendor: \"hellooo\", yess: \"nooo\" }];\n\n return (\n | \n {column.render(\"Header\")} \n | \n ))}\n
|---|
| \n {cell.render(\"Cell\")}\n | \n );\n })}\n
h
;\n // }\n\n // return (\n // \n // {registered_networks.map((network, index) => {\n // // console.log(props.initValue);\n // return (\n // \n // Mobile Network {index} \n //
\n // \n // remove(index)}\n // >\n // -\n // \n // push(\"\")}\n // >\n // +\n // \n // \n // );\n // })}\n //
\n // );\n // }}\n // \n // \n //
{formEl[\"title\"].value}
\nSender ID Manager
\n\n All sms Sender IDs\n
\nAvailable Templates
\nList of templates
\n| # | \nStatus | \nName | \n\n Text\n | \nCreated | \nApproved | \n
|---|---|---|---|---|---|
| 1 | \nInactive | \nAIMFIRMS CHRISTMAS GREETING | \n\n The team at [company name] wishes you peace, joy and prosperity\n throughout the coming year. Thank you for your continued support and\n partnership. We look forward to working with you in the years to\n come.\n | \nMarch, 21st 2020 | \nMarch, 23rd 2020 | \n
| 2 | \nActive | \nSema | \n\n Hey [client name], Thank you for signing up for Sema Communications!\n We’re stoked to see what you’re able todo with our communication\n platform. To get started, we recommend checking out our Quick-Start\n Guide or you can log in below! https://login.sema.co.tz/ Cheers!\n | \nMarch, 22nd 2020 | \nMarch, 23rd 2020 | \n
| 3 | \nActive | \nTanzania | \nINFO | \nsome other text | \nMarch, 23rd 2020 | \n
Template Manager
\nAll sms templates
\nJob Table
\nList of Jobs
\n| # | \nSMS Type | \nJob Name | \nEncoding | \nTotal | \nRemaining | \nSent | \nSender ID | \nStatus | \nScheduled | \nBegin | \nCompletion | \n
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | \nInactive | \nTanzania | \nSema | \nsome text | \nMarch, 23rd 2020 | \nNO | \nInactive | \nTanzania | \nSema | \nsome text | \nMarch, 23rd 2020 | \n
| 2 | \nActive | \nTanzania | \nAIMFIRMS | \nsome text | \nMarch, 23rd 2020 | \nYES | \nInactive | \nTanzania | \nSema | \nsome text | \nMarch, 23rd 2020 | \n
| 3 | \nActive | \nTanzania | \nINFO | \nsome other text | \nMarch, 23rd 2020 | \nYES | \nInactive | \nTanzania | \nSema | \nsome text | \nMarch, 23rd 2020 | \n
Job Manager
\nAll sms Jobs
\n {/* */}\n\n
Contact Lists
\nList of contact lists
\n| Name | \nTotal | \nActions | \n
|---|---|---|
| Jijali Customers | \n500 | \n\n \n | \n
| My Frequent Customers | \n150 | \n\n \n | \n
| Subscribers | \n300 | \n\n \n | \n
| Jijali Customers | \n300 | \n\n | \n
Contact Lists
\n\n All SMS Contact Lists\n
\nCredit Transactions
\nList of All SMS Credit Transactions
\n| # | \nBalance Added | \nCurrency | \nAmount Charged | \nAmount Credited | \nTax Amount | \nProcessing Fee | \nPayment Date | \nRemarks | \n
|---|---|---|---|---|---|---|---|---|
| 1 | \n10000 | \nTZS | \n24/01/2021 | \nsome text | \n\n | NO | \n27/09/2021 | \n\n |
| 2 | \n100000 | \nTZS | \n12/09/2021 | \nsome text | \n\n | YES | \n27/09/2021 | \nFor testing | \n
| 3 | \n50000 | \nTZS | \n\n | some other text | \nMarch, 23rd 2020 | \nYES | \n27/09/2021 | \nFor Testing | \n
SMS TRANSACTIONS
\n\n All SMS Transactions\n
\n \nDLR Report
\n//List of All SMS DLR Report
\n//| SMS ID | \n//Sender ID | \n//DLR Status | \n//Message | \n//Phone Number | \n//MCC | \n//MNC | \n//Type | \n//Length | \n//Characters Added | \n//Rate | \n//Cost | \n//Submit Date | \n//Sent Date | \n//DLR Date | \n//Parts | \n//Country | \n//Operator | \n//Job ID | \n//Source | \n//Error Code | \n//
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | \n//10000 | \n//TZS | \n//24/01/2021 | \n//some text | \n//\n// | NO | \n//27/09/2021 | \n//\n// | ||||||||||||
| 2 | \n//100000 | \n//TZS | \n//12/09/2021 | \n//some text | \n//\n// | YES | \n//27/09/2021 | \n//For testing | \n//||||||||||||
| 3 | \n//50000 | \n//TZS | \n//\n// | some other text | \n//March, 23rd 2020 | \n//YES | \n//27/09/2021 | \n//For Testing | \n//
{JobName}
\n| Name of Campaign | \nSMS Sent | \nDate | \n\n |
|---|---|---|---|
| {JobName} | \n{TotalSms} | \n{JobDateTime} | \n\n |
| Status | \nSMS | \nPercentage % | \nAmount (TZS) | \n
| Delivered | \n{Delivered} | \n{((Delivered / TotalSms) * 100).toFixed(2)} | \n{8 * Delivered} | \n
| Undeliverable | \n{Undeliverable} | \n{((Undeliverable / TotalSms) * 100).toFixed(2)} | \n{8 * Undeliverable} | \n
| Failed | \n{Failed} | \n{((Failed / TotalSms) * 100).toFixed(2)} | \n0 | \n
| Other | \n{TotalSms - (Delivered + Undeliverable + Failed)} | \n\n {(\n ((TotalSms - (Delivered + Undeliverable + Failed)) / TotalSms) *\n 100\n ).toFixed(2)}\n | \n{8 * Accepted} | \n
| \n | \n | Total | \n{(Delivered + Undeliverable + Accepted) * 8} | \n
DLR REPORT
\n\n All Campaign Delivery Reports\n
\n \n\n
\n \n
\n Registered
\n\n
\n Pending\n \n \n
\n Not Allowed\n \n \n );\n};\n\nexport const SelectColumnFilter = ({\n column: { filterValue, setFilter, preFilteredRows, id },\n}) => {\n return (\n Contact Lists
\nList of contacts
\n| \n {column.canFilter ? column.render(\"Filter\") : null} \n | \n ))}\n
|---|
| \n {cell.render(\"Cell\")}\n | \n );\n })}\n
\n \n page{\" \"}\n \n {pageIndex + 1} of {pageOptions.length}\n \n \n gotoPage(0)}\n disabled={!canPreviousPage}\n >\n {\"<<\"}\n \n previousPage()}\n disabled={!canPreviousPage}\n >\n Previous\n \n nextPage()}\n disabled={!canNextPage}\n >\n Next\n \n gotoPage(pagecount - 1)}\n disabled={!canNextPage}\n >\n {\">>\"}\n \n
\n \n Edit Contact List
\nAimFirm's Subscribers
\n\n Add a new Contact\n
\n {/* */}\n\n setShowDeleteModal(false)}\n variant=\"outline-secondary\"\n >\n Cancel\n \n \n
\n {`${row.original.first_name} ${row.original.last_name}`}
\n );\n },\n },\n {\n Header: \"Role\",\n accessor: \"role\",\n },\n {\n Header: \"Email\",\n accessor: \"email\",\n },\n {\n Header: \"Status\",\n accessor: \"status\",\n Cell: ({ value, row }) => {\n switch (value) {\n case \"active\":\n return\n editUser(row.original)}\n style={{ cursor: \"pointer\" }}\n />\n deleteUser(row.original)}\n />\n
\n ),\n },\n ],\n []\n );\n\n const userTable = useTable({ columns, data });\n\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\n userTable;\n\n return (\n | \n {column.render(\"Header\")}\n | \n ))}\n
|---|
| {cell.render(\"Cell\")} | \n );\n })}\n
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n
\n \n| Name | \nAngelica Ramos | \n
|---|---|
| Company | \nThe Wiz | \n
| angelica@ramos.com | \n|
| Phone | \n+1234123123123 | \n
| Status | \n\n | \n
\n\n Activity\n\n
- \n
- \n Signed out\n 30m ago\n
Nam pretium turpis et arcu. Duis arcu tortor, suscipit...
\n \n - \n Created invoice #1204\n 2h ago\n
Sed aliquam ultrices mauris. Integer ante arcu...
\n \n - \n Discarded invoice #1147\n 3h ago\n
Nam pretium turpis et arcu. Duis arcu tortor, suscipit...
\n \n - \n Signed in\n 3h ago\n
Curabitur ligula sapien, tincidunt non, euismod vitae...
\n \n - \n Signed up\n 2d ago\n
Sed aliquam ultrices mauris. Integer ante arcu...
\n \n
\n Users{\" \"}\n {/* \n Add New\n */}\n
\n\nCreate a New User
\nEnter user details
\nProfile
\n\n\n
\n
\n \n
\n \n You are currently using a free trial account. You can use it to\n explore the services offered by Sema Communications although some\n features are limited until you activate your account.\n
\n\n {\" \"}\n Activation does not take long and is{\" \"}\n Free of Charge.\n
\n\n \n Activate Account\n \n
\n \n \n Your email is not verified!\n \n
\n{\" \"}\n
\n Please check your inbox and click the verification link. Or\n
\n\n \n Resend verification email!\n \n
\n General Account settings
\n \n\n Status: Trial \n
\n \n\n
Account API
\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n setModalState(true)}\r\n variant=\"outline-primary\"\r\n >\r\n Change API Password\r\n \r\n
\r\n \r\n
\r\n {apiId} \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n {\r\n fetch(`${process.env.REACT_APP_API_URL}download_doc`, {\r\n headers: {\r\n Authorization: `Bearer ${window.localStorage.getItem(\r\n \"accessToken\"\r\n )}`,\r\n },\r\n })\r\n .then((res) =>\r\n notyf.success(\"Download should start soon\")\r\n )\r\n .catch((err) =>\r\n notyf.error(\"Error fetching documentation\")\r\n );\r\n }}\r\n variant=\"outline-primary\"\r\n >\r\n Download Documentation\r\n \r\n
\r\n Download the SMS API Documentation
\r\n\r\n
\r\n
\n
Account Activation
\n \n{column.canFilter ? column.render(\"Filter\") : null}
*/}\n \n
\n Create new Periodic SMS
\n\n
\n Anniversary SMS
\n\n
\n \n Anniversary SMS \n
\n \n Send Anniversary wishes to your target audience eg. Birtday\n wishes, celebrate the day they joined etc.\n
\n\n \n Upload Anniversary File\n \n
\n No Data
;\n\n const data = React.useMemo(() => mnoData.data, [mnoData.data]);\n\n console.log(\"inside matrix\", data);\n\n const registerState = (value, column) => {\n if (column !== undefined) {\n }\n switch (value) {\n case \"Registered\":\n return (\n \n \n \n
\n \n );\n case \"Not Registered\":\n return (\n \n \n \n
\n \n );\n case \"Pending\":\n return (\n \n \n \n
\n \n );\n default:\n return (\n \n \n \n
\n \n );\n }\n };\n\n const columns = React.useMemo(\n () => [\n {\n Header: \"Vendor/MNO\",\n accessor: \"vendor\",\n },\n {\n Header: \"Vodacom\",\n accessor: \"vodacom\",\n Cell: ({ value, column }) => registerState(value, column),\n },\n {\n Header: \"Tigo\",\n accessor: \"tigo\",\n Cell: ({ value }) => registerState(value),\n },\n {\n Header: \"Airtel\",\n accessor: \"airtel\",\n Cell: ({ value }) => registerState(value),\n },\n {\n Header: \"Halotel\",\n accessor: \"halotel\",\n Cell: ({ value }) => registerState(value),\n },\n {\n Header: \"Zantel\",\n accessor: \"zantel\",\n Cell: ({ value }) => registerState(value),\n },\n {\n Header: \"TTCL\",\n accessor: \"ttcl\",\n Cell: ({ value }) => registerState(value),\n },\n {\n Header: \"Smile\",\n accessor: \"smile\",\n Cell: ({ value }) => registerState(value),\n },\n ],\n []\n );\n\n // if (data === null) {\n // data;\n // }\n\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\n useTable({ columns, data });\n\n let i = 0;\n if (data === null) {\n MatrixReturn = No data
;\n } else {\n MatrixReturn = (\n | \n {column.render(\"Header\")}\n | \n ))}\n \n ))}\n|
|---|---|
| {row.original.network} | */}\n {row.cells.map((cell) => {\n // console.log(cell);\n\n return (\n\n {cell.render(\"Cell\")}\n | \n );\n })}\n
\n
\n );\n },\n },\n ],\n []\n );\n //End of Table columns\n\n //Instantiating the table\n\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n page,\n nextPage,\n previousPage,\n canNextPage,\n canPreviousPage,\n pageOptions,\n visibleColumns,\n gotoPage,\n pageCount,\n prepareRow,\n // state: { expanded },\n state,\n setGlobalFilter,\n } = useTable(\n { columns, data },\n useFilters,\n useGlobalFilter,\n useSortBy,\n useExpanded,\n usePagination\n );\n // setPageSize(8);\n\n const renderRowSubComponent = React.useCallback(\n (data) => \n row.toggleRowExpanded()}\n >\n {row.isExpanded ? (\n
\n \n onEditButtonClicked(row_data)}\n className=\"m-3\"\n color=\"#0392CE\"\n size={24}\n />\n
\n \n openAlertModal(row_data.name, row_data.id)}\n className=\"m-3\"\n color=\"#FFA4A1\"\n size={24}\n />\n
\n Sema Sender IDs
\nList of all Client Sender IDS
\n \n| \n \n {column.canFilter ? column.render(\"Filter\") : null}\n \n | \n ))\n }\n
|---|
| \n \n {\n //Render the cell contents\n cell.render(\"Cell\")\n }\n \n | \n );\n })\n }\n
\n \n page{\" \"}\n \n {pageIndex + 1} of {pageOptions.length}\n \n \n gotoPage(0)}\n disabled={!canPreviousPage}\n >\n {\"<<\"}\n \n previousPage()}\n disabled={!canPreviousPage}\n >\n Previous\n \n nextPage()}\n disabled={!canNextPage}\n >\n Next\n \n gotoPage(pageCount - 1)}\n disabled={!canNextPage}\n >\n {\">>\"}\n \n
\n \n Sender ID Management
\nActivate Account
\n\n Note:Use the same credentials\n you used to create the Account\n
Data is not defined
\n| \n {column.canFilter ? column.render(\"Filter\") : null} */}\n | \n ))}\n
|---|
| \n {cell.render(\"Cell\")}\n | \n );\n })}\n
| \n {/* | \n
\n \n page{\" \"}\n \n {pageIndex + 1} of {pageOptions.length}\n \n \n gotoPage(0)}\n disabled={!canPreviousPage}\n >\n {\"<<\"}\n \n previousPage()}\n disabled={!canPreviousPage}\n >\n Previous\n \n nextPage()}\n disabled={!canNextPage}\n >\n Next\n \n gotoPage(pagecount - 1)}\n disabled={!canNextPage}\n >\n {\">>\"}\n \n
\n \n \n navigate(`${value}`)}\n />\n
\n );\n },\n },\n ];\n return (\n All Accounts
\n\n
\n
\n );\n}\n\nexport default CountryStats;\n","import React from \"react\";\nimport { useTable, useFilters } from \"react-table\";\nimport { Row, Table, Col, Button } from \"react-bootstrap\";\nimport {\n ColumnFilter,\n EmptyColumnFilter,\n} from \"../../../sender_ids/sender_id_table_extensions/ColumnFilter\";\nimport {\n faSort,\n faSortUp,\n faSortDown,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst CustomerDeliveryStats = () => {\n const data = React.useMemo(\n () => [\n {\n status: \"Delivered\",\n sms: \"\",\n parts: \"\",\n amount: \"\",\n currency: \"\",\n },\n {\n status: \"Undeliverable\",\n sms: \"\",\n parts: \"\",\n amount: \"\",\n currency: \"\",\n },\n {\n status: \"Acknowledged\",\n sms: \"\",\n parts: \"\",\n amount: \"\",\n currency: \"\",\n },\n {\n status: \"Expired\",\n sms: \"\",\n parts: \"\",\n amount: \"\",\n currency: \"\",\n },\n {\n status: \"Accepted\",\n sms: \"\",\n parts: \"\",\n amount: \"\",\n currency: \"\",\n },\n {\n status: \"Rejected\",\n sms: \"\",\n parts: \"\",\n amount: \"\",\n currency: \"\",\n },\n ],\n []\n );\n const columns = React.useMemo(\n () => [\n {\n Header: \"Status\",\n accessor: \"status\",\n },\n {\n Header: \"SMS\",\n accessor: \"sms\",\n },\n {\n Header: \"Parts\",\n accessor: \"parts\",\n },\n {\n Header: \"Amount\",\n accessor: \"amount\",\n },\n {\n Header: \"Currency\",\n accessor: \"currency\",\n },\n ],\n []\n );\n\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\n useTable({ columns, data }, useFilters);\n let i = 0;\n return (\n | \n \n {column.render(\"Header\")}\n \n | \n ))}\n
|---|
| \n {cell.render(\"Cell\")}\n | \n );\n })}\n
| \n \n {column.render(\"Header\")}\n \n {column.canFilter ? column.render(\"Filter\") : null} \n | \n ))}\n
|---|
| \n {cell.render(\"Cell\")}\n | \n );\n })}\n
| \n \n {column.render(\"Header\")}\n \n {column.canFilter ? column.render(\"Filter\") : null} \n | \n ))}\n
|---|
| \n {cell.render(\"Cell\")}\n | \n );\n })}\n
| \n {column.render(\"Header\")}\n | \n ))}\n|
|---|---|
| {row.original.network} | */}\n {row.cells.map((cell) => {\n // console.log(cell);\n\n return (\n\n {cell.render(\"Cell\")}\n | \n );\n })}\n
| \n {column.render(\"Header\")}\n | \n ))}\n|
|---|---|
| {row.original.network} | */}\n {row.cells.map((cell) => {\n // console.log(cell);\n\n return (\n\n {cell.render(\"Cell\")}\n | \n );\n })}\n
| \n \n {\n //Render the header\n column.render(\"Header\")\n }\n \n \n {column.canFilter ? column.render(\"Filter\") : null}\n \n | \n ))\n }\n
|---|
| \n \n {\n //Render the cell contents\n cell.render(\"Cell\")\n }\n \n | \n );\n })\n }\n
| \n {renderRowSubComponent({ row })}\n | \n
| \n \n {\n //Render the header\n column.render(\"Header\")\n }\n \n \n {column.canFilter ? column.render(\"Filter\") : null}\n \n | \n ))\n }\n
|---|
| \n \n {\n //Render the cell contents\n cell.render(\"Cell\")\n }\n \n | \n );\n })\n }\n
| \n {renderRowSubComponent({ row })}\n | \n
Track your system usage
\n\n
\n | \n {column.render(\"Header\")}\n | \n ))}\n|
|---|---|
| {row.original.network} | */}\n {row.cells.map((cell) => {\n // console.log(cell);\n\n return (\n\n {cell.render(\"Cell\")}\n | \n );\n })}\n
Monitoring
\nTrack your system usage
\n\n
\n | {column.render(\"Header\")} | \n ))}\n
|---|
| {cell.render(\"Cell\")} | ;\n })}\n
| {column.render(\"Header\")} | \n ))}\n
|---|
| {cell.render(\"Cell\")} | ;\n })}\n
| {column.render(\"Header\")} | \n ))}\n
|---|
| {cell.render(\"Cell\")} | ;\n })}\n
| {column.render(\"Header\")} | \n ))}\n
|---|
| {cell.render(\"Cell\")} | ;\n })}\n
| {column.render(\"Header\")} | \n ))}\n
|---|
| {cell.render(\"Cell\")} | ;\n })}\n
| {column.render(\"Header\")} | \n ))}\n
|---|
| {cell.render(\"Cell\")} | ;\n })}\n
| {column.render(\"Header\")} | \n ))}\n
|---|
| {cell.render(\"Cell\")} | ;\n })}\n
Monitoring
\nCreate Invoice
\n\n \n \n \n \n {/* \n \n {/* \n \n \n
\n);\n\nexport default RouteSimTestTabs;\n","import React, { useEffect, useState } from \"react\";\nimport { Row, Table, Col, Button, Form } from \"react-bootstrap\";\nimport { Formik } from \"formik\";\nimport { Link } from \"react-router-dom\";\nimport {\n useSortBy,\n useTable,\n useGlobalFilter,\n useFilters,\n usePagination,\n} from \"react-table\";\nimport {\n faSort,\n faSortUp,\n faSortDown,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n ColumnFilter,\n DateColumnFilter,\n EmptyColumnFilter,\n} from \"../../../../sender_ids/sender_id_table_extensions/ColumnFilter\";\nimport axios from \"axios\";\nconst RouteSimTestingTable = () => {\n let i = 0;\n const [accountsData, setAccountsData] = useState({\n data: [\n {\n id: \"1\",\n email: \"barakaurio@yahoo.com\",\n phone_number: \"0624327900\",\n created_at: \"2022-05-12 07:49:40\",\n updated_at: \"2022-05-12 07:49:40\",\n status: \"Trial\",\n company_name: \"Nexan Tech\",\n company_email: \"directors@nexantech.com\",\n support_email: \"support@nexantech.com\",\n billing_email: \"bills@nexantech.com\",\n },\n {\n id: \"2\",\n email: \"bakary@yahoo.com\",\n phone_number: \"0624327900\",\n created_at: \"2022-05-12 07:49:40\",\n updated_at: \"2022-05-12 07:49:40\",\n status: \"Activated\",\n company_name: \"BioLiv Tech\",\n company_email: \"directors@nexantech.com\",\n support_email: \"support@nexantech.com\",\n billing_email: \"bills@nexantech.com\",\n },\n {\n id: \"1\",\n email: \"barakaurio@yahoo.com\",\n phone_number: \"0624327900\",\n created_at: \"2022-05-12 07:49:40\",\n updated_at: \"2022-05-12 07:49:40\",\n status: \"Requests Activation\",\n company_name: \"Haki Elimu\",\n company_email: \"directors@nexantech.com\",\n support_email: \"support@nexantech.com\",\n billing_email: \"bills@nexantech.com\",\n },\n ],\n });\n\n useEffect(() => {\n let accounts = [];\n\n async function getAccounts() {\n accounts = await axios.get(\"fetch_accounts\");\n if (accounts.status === 200) {\n if (accounts.data) {\n setAccountsData({ data: [...accounts.data] });\n }\n }\n }\n getAccounts();\n }, []);\n\n const data = React.useMemo(() => accountsData.data, [accountsData.data]);\n\n const columns = React.useMemo(\n () => [\n {\n Header: \"Test type\",\n accessor: \"test_type\",\n Filter: EmptyColumnFilter,\n },\n {\n Header: \"Name\",\n accessor: \"name\",\n Filter: EmptyColumnFilter,\n },\n {\n Header: \"DLR\",\n accessor: \"dlr\",\n Filter: ColumnFilter,\n },\n {\n Header: \"Phone\",\n accessor: \"phone\",\n Filter: EmptyColumnFilter,\n },\n {\n Header: \"Submit Date\",\n accessor: \"submit_date\",\n Filter: DateColumnFilter,\n },\n {\n Header: \"Sent Date\",\n accessor: \"sent_date\",\n Filter: DateColumnFilter,\n },\n {\n Header: \"DLR Date\",\n accessor: \"dlr_date\",\n Filter: DateColumnFilter,\n },\n {\n Header: \"SID Sent\",\n accessor: \"sender_id\",\n Filter: ColumnFilter,\n },\n {\n Header: \"Vendor\",\n accessor: \"vendor\",\n Filter: ColumnFilter,\n },\n {\n Header: \"Encoding\",\n accessor: \"encoding\",\n Filter: EmptyColumnFilter,\n },\n {\n Header: \"Error Code\",\n accessor: \"error_code\",\n Filter: ColumnFilter,\n },\n {\n Header: \"ERR Desc\",\n accessor: \"error_desc\",\n Filter: EmptyColumnFilter,\n },\n {\n Header: \"Text Sent\",\n accessor: \"text_sent\",\n Filter: EmptyColumnFilter,\n },\n {\n Header: \"SMS ID\",\n accessor: \"sms_id\",\n Filter: ColumnFilter,\n },\n {\n Header: \"Status\",\n accessor: \"status\",\n Filter: ColumnFilter,\n Cell: ({ value, row }) => {\n if (value === \"Activated\") {\n return Activated;\n } else if (value === \"Trial\") {\n return Trial;\n } else if (value === \"Requests Activation\") {\n return (\n tabs
*/}\nAnother one
*/}\n| \n {column.canFilter ? column.render(\"Filter\") : null} \n | \n ))}\n
|---|
| \n {cell.render(\"Cell\")}\n | \n );\n })}\n
\n \n page{\" \"}\n \n {pageIndex + 1} of {pageOptions.length}\n \n \n gotoPage(0)}\n disabled={!canPreviousPage}\n >\n {\"<<\"}\n \n previousPage()}\n disabled={!canPreviousPage}\n >\n Previous\n \n nextPage()}\n disabled={!canNextPage}\n >\n Next\n \n gotoPage(pagecount - 1)}\n disabled={!canNextPage}\n >\n {\">>\"}\n \n
\n \n Route/SIM Testing
\n\n \n \n
\n \n the route/sim test table
*/}\nAdmin Users
\n| \n \n {column.canFilter\n ? column.render(\"Filter\")\n : null}\n \n | \n ))}\n
|---|
\n \n page{\" \"}\n \n {pageIndex + 1} of {pageOptions.length}\n \n \n gotoPage(0)}\n disabled={!canPreviousPage}\n >\n {\"<<\"}\n \n previousPage()}\n disabled={!canPreviousPage}\n >\n Previous\n \n nextPage()}\n disabled={!canNextPage}\n >\n Next\n \n gotoPage(pagecount - 1)}\n disabled={!canNextPage}\n >\n {\">>\"}\n \n
\n \n \r\n
\r\n ),\r\n },\r\n ];\r\n return (\r\n \r\n
\r\n \r\n Account Users \r\n All users registered to this account \r\n
\r\n \r\n \r\n
Email notifications
\r\n\r\n Get emails to find out what's going on when you're not online.\r\n You can turn these off\r\n
\r\n \r\n\r\n
Campaign reports
\r\n\r\n Receive detailed reports of your campaigns daily, weekly or\r\n montly\r\n
\r\n \r\n\r\n
{company_name}
\r\n\n
\n 500
\nInternal server error.
\n\n The server encountered something unexpected that didn't allow it to\n complete the request.\n
\n \n \n \n\n
\n 409
\nNot Authorized!
\n\n You are not authorized to access this page.\n
\n {/* \n \n */}\n\n
\n 404
\nPage not found.
\n\n The page you are looking for might have been removed.\n
\n \n \n \n\n
\n\n Sema Dashboard
\nSign in to your account to continue
\n\n
\n Create a free account\n \n
\n \n
\n\n Get started
\n\n Start creating the best possible user experience for you customers.\n
\n\n
\n I already have an account\n \n
\n\n Reset password
\nEnter your email to reset your password.
\n\n
\n \n Alerts with contextual background color.\n
\n\n Hello there! A simple {color} alert—check it out!\n
\n \n Alerts with icon and background color.\n
\n\n
\n \n Hello there! A simple {color} alert—check it out!\n
\n \n Alerts with contextual icon background.\n
\n\n
\n \n Hello there! A simple {color} alert—check it out!\n
\n \n Alerts with contextual outline color.\n
\n\n
\n \n Hello there! A simple {color} alert—check it out!\n
\n \n ))}\n Alerts with large contents.
\n\n
\n
\n Well done!
\n\n Aww yeah, you successfully read this important alert message. This\n example text is going to run a bit longer so that you can see how\n spacing within an alert works with this kind of content.\n
\n\n
\n Whenever you need to, be sure to use margin utilities to keep things\n nice and tidy.\n
\n\n
\n
\n Well done!
\n\n Aww yeah, you successfully read this important alert message. This\n example text is going to run a bit longer so that you can see how\n spacing within an alert works with this kind of content.\n
\n\n
\n Whenever you need to, be sure to use margin utilities to keep things\n nice and tidy.\n
\nAlerts with actions.
\n\n
\n
\n Well done!
\n\n Aww yeah, you successfully read this important alert message. This\n example text is going to run a bit longer so that you can see how\n spacing within an alert works with this kind of content.\n
\n\n
\n \n \n
\n \n
\n
\n Well done!
\n\n Aww yeah, you successfully read this important alert message. This\n example text is going to run a bit longer so that you can see how\n spacing within an alert works with this kind of content.\n
\n\n
\n \n \n
\n Alerts
\n\n\n Default Bootstrap buttons style.\n
\n\n {colors.map((color, index) => (\n \n ))}\n
\n \n {colors.map((color, index) => (\n \n {color.name}\n \n ))}\n
\n Rounded Bootstrap buttons.
\n\n {colors.map((color, index) => (\n \n {color.name}\n \n ))}\n
\n \n {colors.map((color, index) => (\n \n {color.name}\n \n ))}\n
\n \n Buttons without background color.\n
\n\n {colors.map((color, index) => (\n \n {color.name}\n \n ))}\n
\n \n {colors.map((color, index) => (\n \n {color.name}\n \n ))}\n
\n \n Buttons without border radius.\n
\n\n {colors.map((color, index) => (\n \n {color.name}\n \n ))}\n
\n \n {colors.map((color, index) => (\n \n {color.name}\n \n ))}\n
\n \n Default Bootstrap buttons with icons.\n
\n\n \n \n \n \n \n \n
\n\n \n \n \n \n \n \n \n
\n Social buttons with icons.
\n\n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n Fancy larger or smaller buttons.\n
\n\n \n \n \n
\n \n \n \n \n
\n \n Dropdowns styles with buttons.\n
\n\n {colors.map((color, index) => (\n \n Action \n Another action \n Active Item \n Separated link \n \n ))}\n
\n \n {colors.map((color, index) => (\n \n Action \n Another action \n Active Item \n Separated link \n \n ))}\n
\n Button group components.
\nHorizontal button group
\n\n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n\n Button toolbar
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n Vertical button group
\nButtons
\nCards
\n\n\n Here’s a carousel with slides only. Note the presence of the{\" \"}\n .d-block and .w-100 on carousel images to\n prevent browser default image alignment.\n
\n \n \n \n \n Adding in the previous and next controls.\n
\n\n \n \n \n You can also add the indicators to the carousel, alongside the\n controls, too.\n
\n\n \n \n \n Add captions to your slides easily with the{\" \"}\n .carousel-caption element within any{\" \"}\n .carousel-item.\n
\n \n First slide label
\nNulla vitae elit libero, a pharetra augue mollis interdum.
\n\n\n Second slide label
\nLorem ipsum dolor sit amet, consectetur adipiscing elit.
\n\n\n Third slide label
\n\n Praesent commodo cursus magna, vel scelerisque nisl consectetur.\n
\n\n Add .carousel-fade to your carousel to animate slides\n with a fade transition instead of a slide.\n
\n \n \n \n Carousel
\n\n21:9 aspect ratio
\n\n \n
\n 16:9 aspect ratio
\n\n \n
\n 1:1 aspect ratio
\n\n \n
\n 4:3 aspect ratio
\n\n \n
\n Embed Video
\n\n\n Build vertically collapsing accordions in combination with the Collapse\n component.\n
\nExamples for badges.
\n\n {colors.map((color, index) => (\n \n {color.name}\n \n ))}\n
\n \n {colors.map((color, index) => (\n \n {color.name}\n \n ))}\n
\n \n Indicate the current page’s location within a navigational hierarchy.\n
\n\n Lightweight styles for images.\n
\n\n Examples for showing pagination.\n
\n\n Examples for adding Bootstrap popovers.\n
\n\n Examples for using Bootstrap custom progress bars.\n
\n\n Examples for adding custom Bootstrap tooltips.\n
\n\n Indicate the loading state of a component with Bootstrap spinners.\n
\n\n
\n\n \n
\n\n \n\n
\n
\n\n \n
\n General
\n\nGrid
\n\n\n Powerful mobile-first flexbox grid\n
\nDefault Bootstrap modal.
\n\n Use Bootstrap’s JavaScript modal plugin to add dialogs to your site\n for lightboxes, user notifications, or completely custom content.\n
\n\n {colors.map((color, index) => (\n\n Use Bootstrap’s JavaScript modal plugin to add dialogs to your\n site for lightboxes, user notifications, or completely custom\n content.\n
\nColored Bootstrap modal.
\n\n Use Bootstrap’s JavaScript modal plugin to add dialogs to your site\n for lightboxes, user notifications, or completely custom content.\n
\n\n {colors.map((color, index) => (\n\n Use Bootstrap’s JavaScript modal plugin to add dialogs to your\n site for lightboxes, user notifications, or completely custom\n content.\n
\nVertically centered modal.
\n\n Use Bootstrap’s JavaScript modal plugin to add dialogs to your site\n for lightboxes, user notifications, or completely custom content.\n
\n\n {colors.map((color, index) => (\n\n Use Bootstrap’s JavaScript modal plugin to add dialogs to your\n site for lightboxes, user notifications, or completely custom\n content.\n
\n\n These sizes kick in at certain breakpoints to avoid scrollbars on\n smaller viewports.\n
\n\n Use Bootstrap’s JavaScript modal plugin to add dialogs to your site\n for lightboxes, user notifications, or completely custom content.\n
\n\n {sizes.map((size, index) => (\n\n Use Bootstrap’s JavaScript modal plugin to add dialogs to your\n site for lightboxes, user notifications, or completely custom\n content.\n
\nModals
\n\n\n Build hidden sidebars into your project for navigation, shopping\n carts, and more with a few classes and our JavaScript plugin.\n
\n\n There’s no default placement for offcanvas components, so you must set\n the placement parameter.\n
\n \n Scrolling the <body> element is disabled when an\n offcanvas and its backdrop are visible. Use the scroll{\" \"}\n parameter to toggle <body> scrolling and{\" \"}\n backdrop parameter to toggle the backdrop.\n
\n Offcanvas
\n\n\n \n \n \n \n \n \n \n \n \n \n \n
\n);\n\nconst TabsWithIconLabel = ({ name, className }) => (\n {name} tabs
\n\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\n commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean\n massa. Cum sociis natoque penatibus et magnis neque dis parturient\n montes, nascetur ridiculus mus.\n
\n\n Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n Nulla consequat massa quis enim. Donec pede justo, fringilla vel,\n aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,\n imperdiet a, venenatis vitae, justo.\n
\nAnother one
\n\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\n commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean\n massa. Cum sociis natoque penatibus et magnis neque dis parturient\n montes, nascetur ridiculus mus.\n
\n\n Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n Nulla consequat massa quis enim. Donec pede justo, fringilla vel,\n aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,\n imperdiet a, venenatis vitae, justo.\n
\nOne more
\n\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\n commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean\n massa. Cum sociis natoque penatibus et magnis neque dis parturient\n montes, nascetur ridiculus mus.\n
\n\n Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n Nulla consequat massa quis enim. Donec pede justo, fringilla vel,\n aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,\n imperdiet a, venenatis vitae, justo.\n
\n\n \n \n \n \n \n \n \n \n \n \n \n
\n);\n\nconst TabsComponent = () => (\n {name} tabs
\n\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\n commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean\n massa. Cum sociis natoque penatibus et magnis neque dis parturient\n montes, nascetur ridiculus mus.\n
\n\n Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n Nulla consequat massa quis enim. Donec pede justo, fringilla vel,\n aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,\n imperdiet a, venenatis vitae, justo.\n
\nAnother one
\n\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\n commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean\n massa. Cum sociis natoque penatibus et magnis neque dis parturient\n montes, nascetur ridiculus mus.\n
\n\n Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n Nulla consequat massa quis enim. Donec pede justo, fringilla vel,\n aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,\n imperdiet a, venenatis vitae, justo.\n
\nOne more
\n\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\n commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean\n massa. Cum sociis natoque penatibus et magnis neque dis parturient\n montes, nascetur ridiculus mus.\n
\n\n Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n Nulla consequat massa quis enim. Donec pede justo, fringilla vel,\n aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,\n imperdiet a, venenatis vitae, justo.\n
\nTabs
\n\n\n All HTML headings, <h1> through{\" \"}\n <h6>, are available.\n
\n This is a heading h1
\n\n Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem\n quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam\n nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec\n odio et ante tincidunt tempus. Donec vitae sapien ut libero.\n
\nThis is a heading h2
\n\n Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem\n quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam\n nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.\n
\nThis is a heading h3
\n\n Etiam rhoncus. Maecenas tempus, tellus condimentum rhoncus, sem quam\n libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, vel.\n
\nThis is a heading h4
\n\n Etiam rhoncus. Maecenas tempus, tellus condimentum rhoncus, sem quam\n libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, vel.\n
\nThis is a heading h5
\n\n Sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel.\n
\nThis is a heading h6
\n\n Sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel.\n
\nContextual text classes.
\n\n This line of text contains the text-primary class.\n
\n ))}\n\n Styling for common inline HTML5 elements.\n
\n\n You can use the mark-tag to highlight text.\n
\n\n This line of text can be treated as deleted text.\n
\n \n This line of text can be treated as an addition to the document.\n \n
\n\n Bold text using the strong-tag\n
\n\n Italicized text using the em-tag\n
\n\n For quoting blocks of content from another source within your document.\n
\n\n\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer\n posuere erat a ante.\n
\n \n
\n Add .blockquote-reverse for a blockquote with right-aligned\n content.\n
\n\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer\n posuere erat a ante.\n
\n \n
\n The unordered list items will are marked with bullets.\n
\n- \n
- Lorem ipsum dolor sit amet \n
- Consectetur adipiscing elit \n
- Nulla volutpat aliquam velit \n
- Phasellus iaculis neque \n
- Eget porttitor lorem \n
\n The ordered list items will are marked with numbers.\n
\n- \n
- Lorem ipsum dolor sit amet \n
- Consectetur adipiscing elit \n
- Nulla volutpat aliquam velit \n
- Phasellus iaculis neque \n
- Eget porttitor lorem \n
Typography
\n\n\n {React.cloneElement(icon.icon, {\n className: \"feather align-middle me-2\",\n })}\n {icon.name}\n
\n \n);\n\nconst FeatherIcons = () => (\n Feather
\n\n\n Simply beautiful open source icons\n
\n\n
\n \n);\n\nconst FontAwesomeIcons = () => (\n Font Awesome
\n\n\n The web’s most popular icon set and toolkit\n
\n\n \n {iconsSolid.map((icon, iconKey) => (\n
\n
\n Solid icons
\n\n
\n \n {iconsRegular.map((icon, iconKey) => (\n
\n
\n Regular icons
\n\n
\n \n {iconsBrands.map((icon, iconKey) => (\n
\n
\n Brand icons
\n\n Default Bootstrap form layout.\n
\nHorizontal Bootstrap layout.
\nBootstrap column layout.
\nForm Layouts
\n\nBasic Inputs
\n\nInput Groups
\n\nFloating Labels
\n\n\n Select Component by react-select\n
\n\n Input masks by react-input-mask\n
\nAdvanced Inputs
\n\n\n Formik example with Yup validation\n
\nFormik
\n\n\n Modern WYSIWYG editor built for compatibility and extensibility.\n
\n\n Bubble is a simple tooltip based theme for Quill.\n
\nEditors
\n\n\n Using the most basic table markup, here’s how .table-based tables look\n in Bootstrap.\n
\n| Name | \nPhone Number | \n\n Date of Birth\n | \nActions | \n
|---|---|---|---|
| Ashley Briggs | \n864-348-0485 | \nJune 21, 1961 | \n\n | \n
| Carl Jenkins | \n914-939-2458 | \nMay 15, 1948 | \n\n | \n
| Bertha Martin | \n704-993-5435 | \nSeptember 14, 1965 | \n\n | \n
| Stacie Hall | \n765-382-8195 | \nApril 2, 1971 | \n\n | \n
| Amanda Jones | \n202-672-1407 | \nOctober 12, 1966 | \n\n | \n
\n Use striped to add zebra-striping to any table row within\n the <tbody>.\n
\n | Name | \nPhone Number | \n\n Date of Birth\n | \nActions | \n
|---|---|---|---|
| Ashley Briggs | \n864-348-0485 | \nJune 21, 1961 | \n\n | \n
| Carl Jenkins | \n914-939-2458 | \nMay 15, 1948 | \n\n | \n
| Bertha Martin | \n704-993-5435 | \nSeptember 14, 1965 | \n\n | \n
| Stacie Hall | \n765-382-8195 | \nApril 2, 1971 | \n\n | \n
| Amanda Jones | \n202-672-1407 | \nOctober 12, 1966 | \n\n | \n
\n Add size=\"sm\" to make tables more compact by cutting cell\n padding in half.\n
\n | Operation System | \nUsers | \nShare | \n
|---|---|---|
| Windows | \n8.232 | \n40% | \n
| Mac OS | \n3.322 | \n20% | \n
| Linux | \n4.232 | \n34% | \n
| FreeBSD | \n1.121 | \n12% | \n
| Chrome OS | \n1.331 | \n15% | \n
| Android | \n2.301 | \n20% | \n
| iOS | \n1.162 | \n14% | \n
| Windows Phone | \n562 | \n7% | \n
| Other | \n1.181 | \n14% | \n
\n Add hover to enable a hover state on table rows within a{\" \"}\n <tbody>.\n
\n | Name | \nPhone Number | \nDate of Birth | \n
|---|---|---|
| \n | \n 864-348-0485 | \nJune 21, 1961 | \n
| \n | \n 914-939-2458 | \nMay 15, 1948 | \n
| \n | \n 704-993-5435 | \nSeptember 14, 1965 | \n
| \n | \n 765-382-8195 | \nApril 2, 1971 | \n
\n Add bordered for borders on all sides of the table and\n cells.\n
\n | Name | \nPhone Number | \n\n Date of Birth\n | \nActions | \n
|---|---|---|---|
| Ashley Briggs | \n864-348-0485 | \nJune 21, 1961 | \n\n | \n
| Carl Jenkins | \n914-939-2458 | \nMay 15, 1948 | \n\n | \n
| Bertha Martin | \n704-993-5435 | \nSeptember 14, 1965 | \n\n | \n
| Stacie Hall | \n765-382-8195 | \nApril 2, 1971 | \n\n | \n
| Amanda Jones | \n202-672-1407 | \nOctober 12, 1966 | \n\n | \n
\n Use contextual classes to color table rows or individual cells.\n
\n| Name | \nPhone Number | \n\n Date of Birth\n | \nActions | \n
|---|---|---|---|
| Ashley Briggs | \n864-348-0485 | \nJune 21, 1961 | \n\n | \n
| Carl Jenkins | \n914-939-2458 | \nMay 15, 1948 | \n\n | \n
| Bertha Martin | \n704-993-5435 | \nSeptember 14, 1965 | \n\n | \n
| Stacie Hall | \n765-382-8195 | \nApril 2, 1971 | \n\n | \n
| Amanda Jones | \n202-672-1407 | \nOctober 12, 1966 | \n\n | \n
\n Across every breakpoint, use responsive for horizontally\n scrolling tables.\n
\n | # | \nHeading | \nHeading | \nHeading | \nHeading | \nHeading | \nHeading | \nHeading | \nHeading | \nHeading | \n
|---|---|---|---|---|---|---|---|---|---|
| 1 | \nCell | \nCell | \nCell | \nCell | \nCell | \nCell | \nCell | \nCell | \nCell | \n
| 2 | \nCell | \nCell | \nCell | \nCell | \nCell | \nCell | \nCell | \nCell | \nCell | \n
| 3 | \nCell | \nCell | \nCell | \nCell | \nCell | \nCell | \nCell | \nCell | \nCell | \n
Tables
\n\nPagination by react-table
\n| \n {column.render(\"Header\")}\n | \n ))}\n
|---|
| {cell.render(\"Cell\")} | \n );\n })}\n
Pagination
\n\n\n Column sorting by react-table\n
\n| \n {column.render(\"Header\")}\n {/* Add a sort direction indicator */}\n \n {column.isSorted ? (\n column.isSortedDesc ? (\n | \n ))}\n
|---|
| {cell.render(\"Cell\")} | \n );\n })}\n
Column Sorting
\n\n\n {\n const val = e.target.value;\n setFilter((old = []) => [\n val ? parseInt(val, 10) : undefined,\n old[1],\n ]);\n }}\n placeholder={`Min (${min})`}\n style={{\n width: \"110px\",\n }}\n />\n to\n {\n const val = e.target.value;\n setFilter((old = []) => [\n old[0],\n val ? parseInt(val, 10) : undefined,\n ]);\n }}\n placeholder={`Max (${max})`}\n style={{\n width: \"110px\",\n }}\n />\n
\n );\n}\n\n// This is a custom filter UI for selecting\n// a unique option from a list\nfunction SelectColumnFilter({\n column: { filterValue, setFilter, preFilteredRows, id },\n}) {\n // Calculate the options for filtering\n // using the preFilteredRows\n const options = React.useMemo(() => {\n const options = new Set();\n preFilteredRows.forEach((row) => {\n options.add(row.values[id]);\n });\n return [...options.values()];\n }, [id, preFilteredRows]);\n\n // Render a multi-select box\n return (\n \n Column filtering by react-table\n
\n| \n {column.render(\"Header\")}\n {/* Render the columns filter UI */}\n \n {column.canFilter ? column.render(\"Filter\") : null}\n \n | \n ))}\n
|---|
| {cell.render(\"Cell\")} | \n );\n })}\n
Column Filtering
\n\n\n Expandable rows by react-table\n
\n| \n {column.render(\"Header\")}\n | \n ))}\n
|---|
| {cell.render(\"Cell\")} | \n );\n })}\n
Row Expanding
\n\n\n
\n ),\n // The cell can use the individual row's getToggleRowSelectedProps method\n // to the render a checkbox\n Cell: ({ row }) => (\n \n
\n ),\n },\n ...columns,\n ]);\n }\n );\n\n return (\n \n Row selection by react-table\n
\n| \n {column.render(\"Header\")}\n | \n ))}\n
|---|
| {cell.render(\"Cell\")} | \n );\n })}\n
Row Selection
\n\n\n A line chart is a way of plotting data points on a line.\n
\n\n
\n \n A bar chart provides a way of showing data values represented as\n vertical bars.\n
\n\n
\n \n Doughnut charts are excellent at showing the relational proportions\n between data.\n
\n\n
\n \n Pie charts are excellent at showing the relational proportions between\n data.\n
\n\n
\n \n A radar chart is a way of showing multiple data points and the\n variation between them.\n
\n\n
\n \n Polar area charts are similar to pie charts, but each segment has the\n same angle.\n
\n\n
\n Chart.js
\n\n\n Line charts are a typical pictorial representation that depicts trends\n and behaviors over time.\n
\n\n
\n \n Area charts are used to represent quantitative variations.\n
\n\n
\n \n A bar chart is the best tool for displaying comparisons between\n categories of data.\n
\n\n
\n \n A column chart uses vertical bars to display data and is used to\n compare values across categories.\n
\n\n
\n \n Pie charts are an instrumental visualization tool useful in expressing\n data and information in terms of percentages, ratio.\n
\n\n
\n \n Heatmap is a visualization tool that employs color the way a bar chart\n employs height and width in representing data.\n
\n\n
\n \n A Mixed Chart is a visualization that allows the combination of two or\n more distinct graphs.\n
\n\n
\n \n A candlestick chart is a style of financial chart used to describe\n price movements.\n
\n\n
\n ApexCharts
\n\nNotifications
\n\n\n Notyf is a minimalistic JavaScript library for toast\n notifications.\n
\n\n
\n Displays the default road map view.\n
\n\n
\n \n Displays a mixture of normal and satellite views.\n
\n\n
\n \n Panoramic 360 degree views from designated roads throughout its\n coverage area.\n
\n\n apiIsLoaded(map, maps)}\n yesIWantToUseGoogleMapApiInternals={true}\n />\n
\n \n Identify a location on a map.\n
\n\n renderMarkers(map, maps)}\n />\n
\n Google Maps
\n\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n Vector Maps
\n\nCalendar
\n\n\n Open source JavaScript plugin for a full-sized, drag & drop event\n calendar.\n
\n\n
\n);\n\nconst TableOfContents = () => (\n Introduction
\n\n Hello, I hope you find this template useful. AppStack React has been\n crafted on top of Bootstrap 5 and React. The included docs don't replace\n the official ones, but provide a clear view of all extended styles and new\n components that this template provides on top of Bootstrap 5.\n
\n\n\n The docs includes information to understand how the theme is organized,\n how to make changes to the source code, and how to compile and extend it\n to fit your needs.\n
\n\n
\n);\n\nconst SomethingMissing = () => (\n Table of Contents
\n- \n
- \n Getting started\n \n
- \n Environment Variables\n \n
- \n Routing\n \n
- \n Auth0 Authentication\n \n
- \n Firebase Authentication\n \n
- \n JWT Authentication\n \n
- \n Guards\n \n
- \n Deployment\n \n
- \n API Calls\n \n
- \n Redux\n \n
- \n Internationalization\n \n
- \n ESLint & Prettier\n \n
- \n Migrating to Next.js\n \n
- \n Support\n \n
- \n Changelog\n \n
\n
\n);\n\nconst Introduction = () => (\n Something missing?
\n\n If something is missing in the documentation or if you found some part\n confusing, please send us an email (\n support@bootlab.io) with your\n suggestions for improvement. We love hearing from you!\n
\nDocumentation
\n\n
\n
\n);\n\nconst BuildTools = () => (\n Installation
\n\n This project was bootstrapped with{\" \"}\n \n Create React App\n \n . You'll need to install Node.js{\" \"}\n before using Appstack React.\n
\n\n\n Once Node.js is installed, run npm install to install the\n rest of AppStack React's dependencies. All dependencies will be downloaded\n to the node_modules directory.\n
npm install\n\n \n Now you're ready to modify the source files and generate new{\" \"}\n build/ files. AppStack is using webpack and webpack-serve to\n automatically detect file changes and start a local webserver at{\" \"}\n http://localhost:3000.\n
npm start\n \n
\n);\n\nconst Contents = () => (\n Build tools
\n\n Start a local webserver at http://localhost:3000 and detect\n file changes:\n
npm start\n\n \n Compile, optimize, minify and uglify all source files to{\" \"}\n build/:\n
npm run build\n \n
\n);\n\nconst GettingStarted = () => (\n Contents
\n\n Inside the zip-file you'll find the following directories and files. Both\n compiled and minified distrubution files, as well as the source files are\n included in the package.\n
\n\n{`theme/\n ├── .eslintrc\n ├── .gitignore\n ├── .prettierrc\n ├── package.json\n ├── package-lock.json\n ├── README.md\n ├── build/\n ├── public/\n │ ├── favicon.ico\n │ └── index.html\n └── src/\n ├── assets/\n │ ├── img/\n │ └── scss/\n ├── components/\n ├── contexts/\n ├── helpers/\n ├── hooks/\n ├── layouts/\n ├── pages/\n ├── App.js\n ├── constants.js\n ├── routes.js\n └── index.js\n `}\n Getting Started
\n\n
\n
\n);\n\nconst HowToAddRoutes = () => (\n Introduction
\n\n The package includes an implementation of React Router DOM, using the\n programmatic routing model.\n
\n\n
\n);\n\nconst HowToAddALink = () => (\n How to add routes
\n\n Open /src/routes.js and add your new route to the{\" \"}\n routes variable. The example below will result in the{\" \"}\n {` element being called on the{\" \"}\n http://localhost:3000/pages/new route.\n
{`import DashboardLayout from \"./layouts/Dashboard\";\nimport NewPage from \"./pages/NewPage\";\n\nconst routes = [\n {\n path: \"pages\",\n element: \n \n
\n);\n\nconst HowToNavigateProgrammatically = () => (\n How to add a link
\nLearn how to add a link to a component.
\n\n{`import { Link } from \"react-router-dom\";\n\nfunction ExampleComponent() {\n return (\n \n New page\n \n );\n}\n\nexport default ExampleComponent;`}\n \n
\n);\n\nconst Routing = () => (\n How to navigate programmatically
\n\n The example code below includes an example on how to navigate\n programmatically using the useNavigate hook.\n
{`import { useNavigate } from \"react-router-dom\";\n\nfunction ExampleComponent() {\n const navigate = useNavigate();\n\n const handleSubmit = () => {\n navigate(\"/pages/new\");\n };\n\n return (\n \n );\n}\n\nexport default ExampleComponent;\n`}\n Routing
\n\n
\n
\n);\n\nconst QuickStart = () => (\n Introduction
\n\n Auth0 is an easy to implement, adaptable authentication and authorization\n platform. Rapidly integrate authentication and authorization for web,\n mobile, and legacy applications so you can focus on your core business.\n
\n\n
\n);\n\nconst HowToUse = () => (\n Quick start
\n\n Follow these steps if you want to enable Auth0 authentication in your\n application.\n
\n1. Enable AuthProvider
\n\n Enable Auth0's AuthProvider in /src/App.js.\n
{`import { AuthProvider } from \"./contexts/Auth0Context\";\n \nfunction App() {\n return (\n \n {content}\n ;\n )\n}`}\n\n 2. Enable useAuth hook
\n\n\n Enable Auth0's useAuth hook in{\" \"}\n /src/hooks/useAuth.js.\n
{`import { AuthContext } from \"../contexts/Auth0Context\";\n \nconst useAuth = () => {\n return useContext(AuthContext);\n};`}\n \n
\n);\n\nconst Auth0 = () => (\n How to use
\n\n Learn how to use Auth0 authentication. There are multiple examples\n included, including sign in, sign up and sign out.\n
\nRetrieve user info
\n{`import useAuth from '../hooks/useAuth';\n\nconst App = () => {\n const { displayName } = useAuth();\n\n return (\n \n {user.displayName}\n \n );\n};`}\n Execute actions
\n{`import useAuth from '../hooks/useAuth';\n\nconst App = () => {\n const { signIn } = useAuth();\n\n return (\n \n );\n};`}\n Auth0
\n\n
\n
\n);\n\nconst QuickStart = () => (\n Introduction
\n\n Amazon Cognito lets you add user sign-up, sign-in, and access control to\n your web and mobile apps quickly and easily. Amazon Cognito scales to\n millions of users and supports sign-in with social identity providers,\n such as Apple, Facebook, Google, and Amazon, and enterprise identity\n providers via SAML 2.0 and OpenID Connect.\n
\n\n
\n);\n\nconst HowToUse = () => (\n Quick start
\n\n Follow these steps if you want to enable Amazon Cognito authentication in\n your application.\n
\n1. Enable AuthProvider
\n\n Enable Cognito's AuthProvider in /src/App.js.\n
{`import { AuthProvider } from \"./contexts/CognitoContext\";\n \nfunction App() {\n return (\n \n {content}\n ;\n )\n}`}\n\n 2. Enable useAuth hook
\n\n\n Enable Cognito's useAuth hook in{\" \"}\n /src/hooks/useAuth.js.\n
{`import { AuthContext } from \"../contexts/CognitoContext\";\n \nconst useAuth = () => {\n return useContext(AuthContext);\n};`}\n \n
\n);\n\nconst Cognito = () => (\n How to use
\n\n Learn how to use Cognito authentication. There are multiple examples\n included, including sign in, sign up and sign out.\n
\nRetrieve user info
\n{`import useAuth from '../hooks/useAuth';\n\nconst App = () => {\n const { displayName } = useAuth();\n\n return (\n \n {user.displayName}\n \n );\n};`}\n Execute actions
\n{`import useAuth from '../hooks/useAuth';\n\nconst App = () => {\n const { signIn } = useAuth();\n\n return (\n \n );\n};`}\n Cognito
\n\n
\n
\n);\n\nconst QuickStart = () => (\n Introduction
\n\n Firebase Authentication provides backend services, easy-to-use SDKs, and\n ready-made UI libraries to authenticate users to your app. It supports\n authentication using passwords, phone numbers, popular federated identity\n providers like Google, Facebook and Twitter, and more.\n
\n\n
\n);\n\nconst HowToUse = () => (\n Quick start
\n\n Follow these steps if you want to enable Firebase authentication in your\n application.\n
\n1. Enable AuthProvider
\n\n Enable Firebase's AuthProvider in /src/App.js.\n
{`import { AuthProvider } from \"./contexts/FirebaseContext\";\n \nfunction App() {\n return (\n \n {content}\n ;\n )\n}`}\n\n 2. Enable useAuth hook
\n\n\n Enable Firebase's useAuth hook in{\" \"}\n /src/hooks/useAuth.js.\n
{`import { AuthContext } from \"../contexts/FirebaseContext\";\n \nconst useAuth = () => {\n return useContext(AuthContext);\n};`}\n \n
\n);\n\nconst Firebase = () => (\n How to use
\n\n Learn how to use Firebase authentication. There are multiple examples\n included, including sign in, sign up and sign out.\n
\nRetrieve user info
\n{`import useAuth from '../hooks/useAuth';\n\nconst App = () => {\n const { displayName } = useAuth();\n\n return (\n \n {user.displayName}\n \n );\n};`}\n Execute actions
\n{`import useAuth from '../hooks/useAuth';\n\nconst App = () => {\n const { signIn, signInWithGoogle } = useAuth();\n\n return (\n \n \n \n \n );\n};`}\n Firebase
\n\n
\n
\n);\n\nconst QuickStart = () => (\n Introduction
\n\n JSON web token (JWT) is an open standard that defines a compact and\n self-contained way for securely transmitting information between parties\n as a JSON object.\n
\n\n
\n);\n\nconst HowToUse = () => (\n Quick start
\n\n Follow these steps if you want to enable JWT authentication in your\n application.\n
\n1. Enable AuthProvider
\n\n Enable JWT's AuthProvider in /src/App.js.\n
{`import { AuthProvider } from \"./contexts/JWTContext\";\n \nfunction App() {\n return (\n \n {content}\n ;\n )\n}`}\n\n 2. Enable useAuth hook
\n\n\n Enable JWT's useAuth hook in{\" \"}\n /src/hooks/useAuth.js.\n
{`import { AuthContext } from \"../contexts/JWTContext\";\n \nconst useAuth = () => {\n return useContext(AuthContext);\n};`}\n \n
\n);\n\nconst JWT = () => (\n How to use
\n\n Learn how to use JWT authentication. There are multiple examples included,\n including sign in, sign up and sign out.\n
\nRetrieve user info
\n{`import useAuth from '../hooks/useAuth';\n\nconst App = () => {\n const { displayName } = useAuth();\n\n return (\n \n {user.displayName}\n \n );\n};`}\n Execute actions
\n{`import useAuth from '../hooks/useAuth';\n\nconst App = () => {\n const { signIn } = useAuth();\n\n return (\n \n );\n};`}\n JSON Web Token
\n\n
\n
\n);\n\nconst AuthGuard = () => (\n Introduction
\n\n Guards can be used to protect private or public routes based on the\n current user role.\n
\n\n
\n);\n\nconst GuestGuard = () => (\n Auth Guard
\n\n The AuthGuard component can be used to protect a private route from\n unauthenticated users.\n
\n{`import AuthGuard from \"../components/guards/AuthGuard\";\n \nfunction Component() {\n return (\n \n \n )\n}`}\n \n
\n);\n\nconst Guards = () => (\n Guest Guard
\n\n The GuestGuard component can be used to protect a route from authenticated\n users.\n
\n{`import GuestGuard from \"../components/guards/GuestGuard\";\n \nfunction Component() {\n return (\n \n \n )\n}`}\n Guards
\n\n
\n
\n);\n\nconst Axios = () => (\n Introduction
\n\n A common use case for code actions is to make API calls to external\n services. AppStack includes{\" \"}\n
\n
\n);\n\nconst AxiosMockAdapter = () => (\n Axios
\nPerforming a GET request:
\n{`axios.get('/api/user?id=12345')\n.then(function (response) {\n // handle success\n console.log(response);\n})\n.catch(function (error) {\n // handle error\n console.log(error);\n});`}\n Performing a POST request:
\n{`axios.post('/api/user', {\n firstName: 'Fred',\n lastName: 'Flintstone'\n})\n.then(function (response) {\n // handle success\n console.log(response);\n})\n.catch(function (error) {\n // handle error\n console.log(error);\n});`}\n \n
\n);\n\nconst APICalls = () => (\n Axios Mock Adapter
\n\n Axios adapter that allows to easily mock requests.{\" \"}\n
Mocking a GET request:
\n{`mock.onGet(\"/api/user\").reply((config) => {\n return [\n 200,\n {\n users: [{ id: 12345, firstName: \"Fred\", lastName: \"Flintstone\" }],\n },\n ];\n});`}\n Mocking a POST request:
\n\n {`mock.onPost(\"/api/user\").reply((config) => {\n const { firstName, lastName } = JSON.parse(config.data);\n\n if (firstName && lastName) {\n return [200, {\n id: \"12345\",\n firstName: \"Fred\",\n lastName: \"Flintstone\",\n };];\n }\n\n return [400, { message: \"Looks like you didn't provide the required data.\" }];\n});`}\n \n API Calls
\n\n
\n
\n);\n\nconst Usage = () => (\n Introduction
\n\n\n Redux helps you write applications that behave consistently, run in\n different environments (client, server, and native), and are easy to test.\n AppStack leverages{\" \"}\n
\n
\n);\n\nconst CreatingANewSlice = () => (\n Usage
\n\n AppStack contains the following folders/files to store any Redux related\n logic:\n
\n\n- \n
- \n
src/redux/store.jswhere reducers are combined and the\n store is initialized\n \n - \n
src/redux/slices/where reducers are implemented\n \n
\n
\n);\n\nconst AddSliceToRootReducer = () => (\n 1. Creating a new slice
\n\n If you want to create a new slice, pleae add a file to the{\" \"}\n /src/redux/slices/ folder. Quick example:\n
{`import { createSlice } from '@reduxjs/toolkit';\n\nconst initialState = {\n products: []\n};\n\nconst slice = createSlice({\n name: 'products',\n initialState,\n reducers: {\n setProducts(state, payload) {\n state.products = [\n {\n id: '1',\n slug: 'my-first-product',\n title: 'My first product'\n }\n ];\n }\n }\n});\n\nexport const { reducer } = slice;\n\nexport default slice;\n\nexport function getProducts() {\n return async dispatch => {\n const response = await axios.get('/api/products');\n dispatch(slice.actions.setProducts(response.data.products));\n };\n}`}\n \n
\n);\n\nconst UsingTheSlice = () => (\n 2. Add slice to root reducer
\n\n Open the /src/redux/store.ts file and add the new slice:\n
{`import productsReducer from \"./slices/products\";\n\nexport const store = configureStore({\n reducer: {\n products: productsReducer,\n },\n});`}\n \n
\n);\n\nfunction Counter() {\n const count = useAppSelector(selectCount);\n const dispatch = useAppDispatch();\n\n return (\n 3. Using the slice
\n{`import { useDispatch, useSelector } from 'react-redux';\nimport { getProducts } from '../redux/slices/products';\n\nfunction ProductList() {\n const dispatch = useDispatch();\n const { products } = useSelector((state) => state.products);\n\n useEffect(() => {\n dispatch(getProducts());\n }, [dispatch]);\n\n return (\n \n {products.map((product) => (\n \n {product.name}\n \n ))}\n \n );\n}`}\n \n dispatch(decrement())}\n >\n -\n \n dispatch(increment())}\n >\n +\n \n
\n {count}
\n \n dispatch(incrementByAmount(1))}\n className=\"me-2\"\n >\n Add Amount\n \n dispatch(incrementAsync(1))}\n className=\"me-2\"\n >\n Add Async\n \n dispatch(incrementIfOdd(1))}\n className=\"me-2\"\n >\n Add If Odd\n \n
\n \n
\n);\n\nconst ReduxDevTools = () => (\n Real-life example
\n\n The example below includes various methods, including{\" \"}\n createSlice and createAsyncThunk. Any time you\n click the \"Increment\" and \"Decrement buttons in the example below, the\n following happens:\n
- \n
- The corresponding Redux action will be dispatched to the store \n
- \n The counter slice reducer will see the actions and update its state\n \n
- \n The
{`component will see the new state value\n from the store and re-render itself with the new data\n`} \n
\n
\n);\n\nconst Redux = () => (\n Redux DevTools
\n\n Redux DevTools offers developer tools to power-up Redux development\n workflow or any other architecture which handles the state change (see\n integrations).\n
\n\n It can be used as a browser extension (for{\" \"}\n
Redux
\n\n
\n
\n);\n\nconst UsageWithHooks = () => (\n Introduction
\n\n react-i18next is a powerful internationalization framework for React which\n is based on i18next. The module provides multiple components eg. to assert\n that needed translations get loaded or that your content gets rendered\n when the language changes.\n
\n
\n Translations can be configured in the /src/i18n.js file.\n
{`const resources = {\n en: {\n translation: {\n \"Welcome back\": \"Welcome back\",\n },\n },\n fr: {\n translation: {\n \"Welcome back\": \"Bon retour\",\n },\n },\n de: {\n translation: {\n \"Welcome back\": \"Willkommen zurück\",\n },\n },\n};`}\n \n
\n);\n\nconst UsageWithHOC = () => (\n Usage with hooks
\n\n Using the hook in functional components is one of the options you got.\n
\n{`import React from 'react';\n\nimport { useTranslation } from 'react-i18next';\n\nfunction MyComponent () {\n const { t, i18n } = useTranslation();\n return {t('Welcome back')}
\n}`}\n \n
\n);\n\nconst LearnMore = () => (\n Usage with HOC
\n\n Using higher order components is one of the most used method to extend\n existing components by passing additional props to them.\n
\n{`import React from 'react';\n\nimport { withTranslation } from 'react-i18next';\n\nfunction MyComponent ({ t }) {\n return {t('Welcome back')}
\n}\n\nexport default withTranslation()(MyComponent);`}\n \n
\n);\n\nconst Internationalization = () => (\n Learn more
\n\n To learn more about react-i18next,{\" \"}\n
Internationalization
\n\n
\n
\n);\n\nconst Adding = () => (\n Introduction
\n\n Your project can consume variables declared in your environment as if they\n were declared locally in your JS files. By default you will have{\" \"}\n NODE_ENV defined for you, and any other environment variables\n starting with REACT_APP_.\n
\n
\n);\n\nconst Accessing = () => (\n Adding environment variables
\n\n To define permanent environment variables, create a file called{\" \"}\n .env in the root of your project:\n
REACT_APP_NOT_SECRET_CODE=abcdef\n\n \n Note: You need to restart the development server after changing{\" \"}\n .env files.\n
\n
\n);\nconst LearnMore = () => (\n Accessing environment variables
\n\n Environment variables will be defined for you on process.env.\n For example, having an environment variable named{\" \"}\n REACT_APP_NOT_SECRET_CODE\n will be exposed in your JS as{\" \"}\n process.env.REACT_APP_NOT_SECRET_CODE.\n
{`if (process.env.NODE_ENV !== 'production') {\n // do something\n}`}\n\n {`{process.env.REACT_APP_WEBSITE_NAME} `}\n\n \n Note: You need to restart the development server after changing{\" \"}\n .env files.\n
\n
\n);\n\nconst EnvironmentVariables = () => (\n Learn more
\n\n To learn more about environment variables,{\" \"}\n
Environment Variables
\n\n
\n
\n);\n\nconst Usage = () => (\n Introduction
\n\n To format code automatically, we've included a basic ESLint & Prettier\n configuration. ESLint statically analyzes your code to quickly find\n problems. Prettier is used to automatically format the code you write to\n ensure a consistent code style withing your projects.\n
\nIncluded ESLint configuration:
\n\n{`{\n \"extends\": [\"react-app\", \"prettier\"],\n \"plugins\": [\"prettier\"],\n \"rules\": {\n \"prettier/prettier\": \"error\"\n }\n}`}\n \n
\n);\n\nconst VSCodeIntegration = () => (\n Usage
\nFormat all source files in the /src folder:
\n\nnpm run lint\n \n
\n);\n\nconst ESLintAndPrettier = () => (\n VSCode integration
\n\n To use ESLint & Prettier in combination with VSCode, we suggest installing\n the{\" \"}\n
{`{\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"editor.formatOnType\": true,\n \"editor.formatOnSave\": true,\n \"editor.formatOnPaste\": true,\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": true\n }\n}`}\n ESLint & Prettier
\n\n
\n
\n);\n\nconst StaticServer = () => (\n Introduction
\n\n npm run build creates a build directory with a production\n build of your app. Set up your favorite HTTP server so that a visitor to\n your site is served index.html, and requests to static paths like{\" \"}\n {`/static/js/main. are served with the contents of\n the {`/static/js/main. file.\n
\n
\n);\n\nconst OtherSolutions = () => (\n Static Server
\n\n For environments using{\" \"}\n
{`npm install -g serve\nserve -s build`}\n\n \n The last command shown above will serve your static site on the port 5000.\n Like many of\n -l{\" \"}\n or --listen flags:\n
serve -s build -l 4000\n\n \n Run this command to get a full list of the options available:\n
\nserve -h\n \n
\n);\n\nconst Express = () => (\n Other Solutions
\n\n You don’t necessarily need a static server in order to run a Create React\n App project in production. It also works well when integrated into an\n existing server side app.\n
\n\n
\n);\n\nconst Netlify = () => (\n Express
\n\n Express is a fast, unopinionated, minimalist web framework for Node.js.\n Here’s a programmatic example:\n
\n{`const express = require('express');\nconst path = require('path');\nconst app = express();\napp.use(express.static(path.join(__dirname, 'build')));\napp.get('/', function(req, res) {\n res.sendFile(path.join(__dirname, 'build', 'index.html'));\n});\napp.listen(9000);`}\n \n
\n);\n\nconst Deployment = () => (\n Netlify
\n\n Deploy modern static websites with Netlify. Get CDN, Continuous\n deployment, 1-click HTTPS, and all the services you need.\n
\nTo do a manual deploy to Netlify’s CDN:
\n{`npm install netlify-cli -g\nnetlify deploy`}\n\n \n Choose build as the path to deploy.\n
\n To setup continuous delivery:\n
\n With this setup Netlify will build and deploy when you push to git or open\n a pull request:\n
- \n
- \n
- Pick your Git hosting service and select your repository \n
- \n Click
Build your site\n \n
Deployment
\n\n
\n
\n);\n\nconst OfficialGuide = () => (\n Introduction
\n\n AppStack React is built using Create Rect App. Follow the steps below to\n migrate to Next.js Migrating to Next.js allows you to use SSR, API Routes\n and more.\n
\n\n
\n);\n\nconst UpdateDependencies = () => (\n Official Guide
\n\n The official guide on how to migrate from Create React App to Next.js can\n be found{\" \"}\n
\n
\n);\n\nconst UpdateEntryFile = () => (\n Update dependencies
\n\n\n The first step towards migrating to Next.js is to update package.json and\n dependencies.\n
\n\n\n Remove the react-scripts and react-router-dom{\" \"}\n dependencies.\n
{`npm uninstall react-scripts craco react-router-dom`}\n\n \n Install the next.js dependency.\n
{`npm install next --save`}\n\n \n Open the package.json file and replace the{\" \"}\n scripts with:\n
{`\"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\"\n}`}\n \n
\n);\n\nconst UpdateSharedLayout = () => (\n Update entry file
\n\n\n Create React App uses the public directory for the entry HTML file (\n public/index.html), whereas Next.js uses a custom file (\n /src/pages/_document.js).\n
\n All code in the {``} section of the{\" \"}\n public/index.html file should be moved to the{\" \"}\n /src/pages/_document.js file. Learn more{\" \"}\n
\n
\n);\n\nconst UpdateRoutes = () => (\n Update shared layout
\n\n\n Create React App uses the /src/index.js file as an entry\n point, whereas Next.js requires a custom /src/_app.js file.\n You may want to move logic to the new _app.js file. Learn\n more{\" \"}\n
\n
\n);\n\nconst MigratingToNextJS = () => (\n Update routes
\n\n\n With Create React App, you're likely using React Router. Instead of using\n a third-party library, Next.js includes its own file-system based routing.\n
\n- \n
- \n Convert all Route components to new files in the
src/pages{\" \"}\n directory. It is recommended to rename the files using{\" \"}\ndash-case.\n \n - \n Remove
useRoutesfrom the/src/App.jsfile.\n \n - \n Replace the Link component from
react-router-domwith the\n Link component fromnext/link.\n \n
\n For more information, see{\" \"}\n
Migrating to Next.js
\n\n
Support
\n\n
\n Our support mainly covers pre-sale questions, basic theme questions\n and bug reports through our support email:{\" \"}\n support@bootlab.io. To be\n eligible to request the technical support you must have purchased\n the theme and have at least one license.\n
\n\n When you send a support request please do describe your issue with\n as much detail as possible. If you can provide a link to your\n developing site then this can help us to solve your issue faster.\n Upon submitting a bug report, we will take it as a high priority\n case and we will release the fix with upcoming releases or we can\n send the fix to a customer via email if the customer needs the fix\n urgently.\n
\n \nChangelog
\n\n\n
\n v2.1.0 \n
\n – 7 October, 2021
\n- \n
- Added: Table pagination (advanced-tables/pagination) \n
- \n Added: Table column sorting (advanced-tables/column-sorting)\n \n
- \n Added: Table column filters (advanced-tables/column-filtering)\n \n
- Added: Table row expanding (advanced-tables/row-expanding) \n
- Added: Table row selection (advanced-tables/row-selection) \n
- Removed: react-bootstrap-table-2 \n
- Migrated: Node Sass to Dart Sass \n
- Updated: Quill 2.0.0-beta.4 \n
- Updated: Bootstrap 5.1.2 \n
- Updated: Dependencies to latest versions \n
\n v2.0.1 \n
\n – 3 October, 2021
\n- \n
- Fix: CSS output files \n
- Updated: Dependencies to latest versions \n
\n v2.0.0 \n
\n – 27 September, 2021
\n- \n
- Added: Dark mode support \n
- Added: Theme builder \n
- Added: Compact sidebar variant \n
- Added: Right sidebar variant \n
- Added: Formik examples (form-plugins/formik) \n
- Added: Offcanvas examples (ui/offcanvas) \n
- Added: Firebase authentication \n
- Added: Cognito authentication \n
- Added: Auth0 authentication \n
- Added: JWT authentication \n
- Added: Prettier \n
- Added: ESLint \n
- Added: Web Vitals \n
- Added: Internationalization (i18next) \n
- Added: React Helmet Async \n
- Added: Redux Toolkit \n
- Added: Notyf notifications \n
- Added: Yup validation \n
- Added: Multiple documentation pages \n
- Migrated: All components to React Hooks \n
- Removed: Redux Toastr \n
- Removed: Smart Wizard \n
- Updated: Bootstrap 5.1.1 \n
- Updated: React v17 \n
- Updated: React Router DOM v6 \n
- Updated: Dependencies to latest versions \n
\n This page is only visible by authenticated users.\n
\n \n )}\n\n DB Campaign
\n\n\n Send SMS from Database Data\n
\nAvailable Channels
\nList of channels
\n| # | \nType | \nChannel | \nKeyword | \nPrice | \nActive | \nAuto Reply | \nSender ID | \nText | \nAuto Post | \nURL | \n
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | \nType 1 | \nChannel 1 | \nSema | \nsome text | \nTZS 20 | \nYES | \nSema | \nsome text | \nYES | \nhttps://bit.ly/xuZcmv | \n
| 2 | \nType 2 | \nChannel 1 | \nSema | \nsome text | \nTZS 30 | \nNO | \nJIJALI | \nsome text | \nNO | \nhttps://bit.ly/xuZcmv | \n
| 3 | \nType 3 | \nChannel 2 | \nAIM | \nsome other text | \nTZS 20 | \nYES | \nAIM | \nsome text | \nYES | \nhttps://bit.ly/xuZcmv | \n
Channel Manager
\n\nAll sms channels
\n \n\n
\n
Route Testing
\nTest SMPP routes and sms
\n\n \n Go \n
\n \n
\n
Sender ID Management
\nManage Sender IDs
\n\n \n Go \n
\n \n
\n
Accounts Management
\nManage Sema accounts
\n\n \n Go \n
\n Welcome to Sema Dashboard
\nPruning
\r\n\n
\n );\n },\n },\n ];\n return (\n \n
\n Sender ID Testing
\n\n
\n
\n \n
Under Construction
\nWe are working on something pretty cool!
\n\n \n Resend\n \n
\n Verify your email
\n\n We've sent an email to {email}to verify your email and activate your\n account. The link in the mail will expire in 24 hours.\n
\n\n
\n Successfully verified your email
\n\n Go to Login\n
\n\n
\n\n Reset password Form
\n {/*Enter your email to reset your password.
*/}\n\n
\n \r\n \r\n {data.isEnabled ? (\r\n
\r\n
\r\n \r\n Campaign Reports \r\n
\r\n Recieve campaign reports in your emails
\r\n\r\n {data.isEnabled ? (\r\n Enabled \r\n ) : (\r\n Disabled \r\n )}\r\n
\r\n \r\n {isLoading ? (\r\n
\r\n )}\r\n \r\n Loading
\r\n ) : (\r\n \r\n )}\r\n\r\n \r\n {data.sendWeekly ? (\r\n
\r\n
\r\n \r\n Weekly Campaign Report Time \r\n \r\n Set the time and day of the week you want to recieve a\r\n report for the whole week\r\n \r\n
\r\n \r\n {data.sendWeekly ? (\r\n Enabled \r\n ) : (\r\n Disabled \r\n )}\r\n
\r\n \r\n {isLoading ? (\r\n
\r\n )}\r\n \r\n Loading
\r\n ) : (\r\n \r\n )}\r\n\r\n \r\n {data.sendMonthly ? (\r\n
\r\n
\r\n \r\n Monthyly campaign report \r\n \r\n Recieve a report of all you campaigns at the end of the\r\n month\r\n \r\n
\r\n \r\n {data.sendMonthly ? (\r\n Enabled \r\n ) : (\r\n Disabled \r\n )}\r\n
\r\n Loading
;\r\n};\r\n\r\nexport default AccountReport;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { Button, Card, Container } from \"react-bootstrap\";\r\nimport Pusher from \"pusher-js\";\r\nimport { useParams } from \"react-router-dom\";\r\nimport { faFileDownload, faDownload } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport Echo from \"laravel-echo\";\r\nimport usePalette from \"../../../../hooks/usePalette\";\r\nconst PruningDownload = () => {\r\n const { file_id } = useParams();\r\n const [isReady, setIsReady] = useState(false);\r\n const palette = usePalette();\r\n\r\n window.Echo.private(`files-${file_id}`).listen(\".job.completed\", (e) => {\r\n console.log(\"From echo: \", e);\r\n setIsReady(true);\r\n });\r\n\r\n /**\r\n * This has three states\r\n *\r\n * 1. Uploading\r\n * 2. Processing\r\n * 3. Ready for download\r\n */\r\n const downloadFile = async () => {\r\n try {\r\n const res = await fetch(\r\n `${process.env.REACT_APP_API_URL}administration/download-file/${file_id}`\r\n );\r\n // console.log(\"File: \", await res.json());\r\n const fileUrl = `${process.env.REACT_APP_API_URL}administration/download-file/${file_id}`;\r\n // Replace with the actual URL of the file\r\n\r\n // Create an anchor element\r\n const link = document.createElement(\"a\");\r\n link.href = fileUrl;\r\n\r\n // Set the download attribute and filename\r\n link.setAttribute(\"download\", \"filename.pdf\");\r\n\r\n // Append the anchor element to the document body\r\n document.body.appendChild(link);\r\n\r\n // Trigger the click event to start the download\r\n link.click();\r\n\r\n // Clean up by removing the anchor element from the document\r\n document.body.removeChild(link);\r\n } catch (err) {\r\n console.log(\"Error \", err);\r\n }\r\n };\r\n if (isReady) {\r\n return (\r\n <>\r\n\r\n \r\n
\r\n \r\n Your file is ready for download!\r\n
\r\nProcessing your file
\r\n\r\n \r\n
\r\n