{children}
11 |
9 |
10 | Create Next App
11 |
12 |
13 |
14 |
15 |
16 |
55 |
56 |
68 |
69 | )
70 | }
71 |
72 | export default Home
73 |
--------------------------------------------------------------------------------
/example/components/Sidebar/SidebarContent.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | import routes, { routeIsActive } from 'routes/sidebar'
3 | import * as Icons from 'icons'
4 | import { IIcon } from 'icons'
5 | import SidebarSubmenu from './SidebarSubmenu'
6 | import { Button } from '@roketid/windmill-react-ui'
7 | import { useRouter } from 'next/router'
8 |
9 | function Icon({ icon, ...props }: IIcon){
10 | // @ts-ignore
11 | const Icon= Icons[icon]
12 | return 17 | Welcome to Next.js! 18 |
19 | 20 |
21 | Get started by editing{' '}
22 | pages/index.js
23 |
26 |
27 |
54 | Documentation →
28 |Find in-depth information about Next.js features and API.
29 | 30 | 31 | 32 |Learn →
33 |Learn about Next.js in an interactive course with quizzes!
34 | 35 | 36 | 40 |Examples →
41 |Discover and deploy boilerplate example Next.js projects.
42 | 43 | 44 | 48 |Deploy →
49 |50 | Instantly deploy your Next.js site to a public URL with Vercel. 51 |
52 | 53 |
25 |
26 |
80 | )
81 | }
82 |
83 | export default SidebarContent
--------------------------------------------------------------------------------
/pages/example/forgot-password.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useState } from 'react'
2 | import Image from 'next/image'
3 |
4 | import { Label, Input, Button, WindmillContext } from '@roketid/windmill-react-ui'
5 | import { useAuth } from 'hooks/auth'
6 |
7 | interface IEvent {
8 | preventDefault: () => void
9 | }
10 |
11 | function ForgotPassword() {
12 | const { forgotPassword } = useAuth({ middleware: 'guest' })
13 |
14 | const [submitting, setSubmittingState] = useState(false)
15 | const [email, setEmail] = useState('')
16 | const [errors, setErrors] = useState([])
17 | const [status, setStatus] = useState(null)
18 |
19 | const submitForm = async (event: IEvent) => {
20 | event.preventDefault()
21 |
22 | setSubmittingState(true)
23 | forgotPassword({ email, setErrors, setStatus })
24 | setSubmittingState(false)
25 | }
26 |
27 | const { mode } = useContext(WindmillContext)
28 | const imgSource = mode === 'dark' ? '/assets/img/forgot-password-office-dark.jpeg' : '/assets/img/forgot-password-office.jpeg'
29 |
30 | return (
31 |
27 |
30 | {appName}
31 |
32 |
33 |
34 | -
35 | {routes.map((route) =>
36 | route.routes ? (
37 |
- 40 | 44 | 52 | {routeIsActive(pathname, route) && ( 53 | 57 | )} 58 | 59 | 64 | {route.name} 65 | 66 | 67 | 68 | ) 69 | )} 70 |
72 |
78 |
79 |
32 |
72 | )
73 | }
74 |
75 | export default ForgotPassword
76 |
--------------------------------------------------------------------------------
/utils/demo/chartsData.ts:
--------------------------------------------------------------------------------
1 | export interface ILegends{
2 | title: string
3 | color: string
4 | }
5 |
6 |
7 | export const doughnutLegends: ILegends[] = [
8 | { title: 'Shirts', color: 'bg-blue-500' },
9 | { title: 'Shoes', color: 'bg-teal-600' },
10 | { title: 'Bags', color: 'bg-purple-600' },
11 | ]
12 |
13 | export const lineLegends: ILegends[] = [
14 | { title: 'Organic', color: 'bg-teal-600' },
15 | { title: 'Paid', color: 'bg-purple-600' },
16 | ]
17 |
18 | export const barLegends: ILegends[] = [
19 | { title: 'Shoes', color: 'bg-teal-600' },
20 | { title: 'Bags', color: 'bg-purple-600' },
21 | ]
22 |
23 | export const doughnutOptions = {
24 | data: {
25 | datasets: [
26 | {
27 | data: [33, 33, 33],
28 | /**
29 | * These colors come from Tailwind CSS palette
30 | * https://tailwindcss.com/docs/customizing-colors/#default-color-palette
31 | */
32 | backgroundColor: ['#0694a2', '#1c64f2', '#7e3af2'],
33 | label: 'Dataset 1',
34 | },
35 | ],
36 | labels: ['Shoes', 'Shirts', 'Bags'],
37 | },
38 | options: {
39 | responsive: true,
40 | cutoutPercentage: 80,
41 | },
42 | legend: {
43 | display: false,
44 | },
45 | }
46 |
47 | export const lineOptions = {
48 | data: {
49 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
50 | datasets: [
51 | {
52 | label: 'Organic',
53 | /**
54 | * These colors come from Tailwind CSS palette
55 | * https://tailwindcss.com/docs/customizing-colors/#default-color-palette
56 | */
57 | backgroundColor: '#0694a2',
58 | borderColor: '#0694a2',
59 | data: [43, 48, 40, 54, 67, 73, 70],
60 | fill: false,
61 | },
62 | {
63 | label: 'Paid',
64 | fill: false,
65 | /**
66 | * These colors come from Tailwind CSS palette
67 | * https://tailwindcss.com/docs/customizing-colors/#default-color-palette
68 | */
69 | backgroundColor: '#7e3af2',
70 | borderColor: '#7e3af2',
71 | data: [24, 50, 64, 74, 52, 51, 65],
72 | },
73 | ],
74 | },
75 | options: {
76 | responsive: true,
77 | tooltips: {
78 | mode: 'index',
79 | intersect: false,
80 | },
81 | scales: {
82 | x: {
83 | display: true,
84 | scaleLabel: {
85 | display: true,
86 | labelString: 'Month',
87 | },
88 | },
89 | y: {
90 | display: true,
91 | scaleLabel: {
92 | display: true,
93 | labelString: 'Value',
94 | },
95 | },
96 | },
97 | },
98 | legend: {
99 | display: false,
100 | },
101 | }
102 |
103 | export const barOptions = {
104 | data: {
105 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
106 | datasets: [
107 | {
108 | label: 'Shoes',
109 | backgroundColor: '#0694a2',
110 | // borderColor: window.chartColors.red,
111 | borderWidth: 1,
112 | data: [-3, 14, 52, 74, 33, 90, 70],
113 | },
114 | {
115 | label: 'Bags',
116 | backgroundColor: '#7e3af2',
117 | // borderColor: window.chartColors.blue,
118 | borderWidth: 1,
119 | data: [66, 33, 43, 12, 54, 62, 84],
120 | },
121 | ],
122 | },
123 | options: {
124 | responsive: true,
125 | },
126 | legend: {
127 | display: false,
128 | },
129 | }
130 |
131 |
--------------------------------------------------------------------------------
/example/components/Sidebar/SidebarSubmenu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext } from 'react'
2 | import Link from 'next/link'
3 | import { useRouter } from 'next/router'
4 | import { DropdownIcon, IIcon } from 'icons'
5 | import * as Icons from 'icons'
6 | import { Transition } from '@roketid/windmill-react-ui'
7 | import { IRoute, routeIsActive } from 'routes/sidebar'
8 | import SidebarContext from 'context/SidebarContext'
9 |
10 | function Icon({ icon, ...props }: IIcon) {
11 | // @ts-ignore
12 | const _Icon = Icons[icon]
13 | return <_Icon {...props} />
14 | }
15 |
16 | interface ISidebarSubmenu {
17 | route: IRoute
18 | linkClicked: () => void
19 | }
20 |
21 | function SidebarSubmenu({ route, linkClicked }: ISidebarSubmenu) {
22 | const { pathname } = useRouter()
23 | const { saveScroll } = useContext(SidebarContext)
24 |
25 | const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(
26 | route.routes
27 | ? route.routes.filter((r) => {
28 | return routeIsActive(pathname, r)
29 | }).length > 0
30 | : false
31 | )
32 |
33 | function handleDropdownMenuClick() {
34 | setIsDropdownMenuOpen(!isDropdownMenuOpen)
35 | }
36 |
37 | return (
38 |
33 |
71 |
34 |
44 |
68 |
69 |
70 |
35 |
42 |
43 | -
74 | {
75 | route.routes && route.routes.map((r) => (
76 |
- 80 | 84 | 92 | {r.name} 93 | 94 | 95 | 96 | )) 97 | } 98 |
47 |
95 | )
96 | }
97 |
98 | export default PasswordReset
99 |
--------------------------------------------------------------------------------
/pages/example/verify-email.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useEffect, useState } from 'react'
2 | import Image from 'next/image'
3 |
4 | import { Button, WindmillContext } from '@roketid/windmill-react-ui'
5 | import { useAuth } from 'hooks/auth'
6 | import Loader from 'example/components/Loader/Loader'
7 | import { useRouter } from 'next/router'
8 |
9 | function ForgotPassword() {
10 | const router = useRouter()
11 |
12 | const { loading, user, redirectedUrl, logout, resendEmailVerification } = useAuth({
13 | middleware: 'auth',
14 | })
15 |
16 | const [submitting, setSubmittingState] = useState(false)
17 | const [status, setStatus] = useState(null)
18 | const [errors, setErrors] = useState([])
19 |
20 | const { mode } = useContext(WindmillContext)
21 | const imgSource = mode === 'dark' ? '/assets/img/mailbox-dark.jpg' : '/assets/img/mailbox.jpg'
22 |
23 | useEffect(() => {
24 | if (errors.length === 0 && user && user.email_verified_at) {
25 | router.push(redirectedUrl)
26 | }
27 | })
28 |
29 | return loading || user
30 | ?
48 |
94 |
49 |
59 |
91 |
92 |
93 |
50 |
57 |
58 |
33 |
92 | )
93 | }
94 |
95 | export default ForgotPassword
96 |
--------------------------------------------------------------------------------
/pages/example/cards.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { Card, CardBody } from '@roketid/windmill-react-ui'
4 | import PageTitle from 'example/components/Typography/PageTitle'
5 | import SectionTitle from 'example/components/Typography/SectionTitle'
6 | import CTA from 'example/components/CTA'
7 | import InfoCard from 'example/components/Cards/InfoCard'
8 | import RoundIcon from 'example/components/RoundIcon'
9 | import Layout from 'example/containers/Layout'
10 | import { CartIcon, ChatIcon, MoneyIcon, PeopleIcon, StarIcon } from 'icons'
11 |
12 | function Cards() {
13 | return (
14 |
34 |
91 |
35 |
45 |
89 |
90 |
36 |
43 |
44 |
46 |
88 | 47 | Verify Email 48 |
49 | { 50 | errors.length && !submitting 51 | ?{errors[0]}
52 | : `` 53 | } 54 |
55 | Thanks for signing up! Before getting started, could you
56 | verify your email address by clicking on the link we just
57 | emailed to you? If you didn't receive the email, we will
58 | gladly send you another.
59 |
60 |
61 | {status === 'verification-link-sent' && (
62 |
63 | A new verification link has been sent to the email
64 | address you provided during registration.
65 |
66 | )}
67 |
68 |
69 |
79 |
80 |
86 |
87 | 24 | Large, full width sections goes here 25 |
26 |
32 |
33 | {/* @ts-ignore */}
34 |
41 |
42 |
43 | {/* @ts-ignore */}
44 |
51 |
52 |
53 | {/* @ts-ignore */}
54 |
61 |
62 |
63 | {/* @ts-ignore */}
64 |
71 |
72 |
73 |
76 |
77 |
78 |
85 |
86 |
87 |
88 |
89 |
96 |
97 |
98 | Revenue
79 |80 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga, cum commodi a omnis 81 | numquam quod? Totam exercitationem quos hic ipsam at qui cum numquam, sed amet 82 | ratione! Ratione, nihil dolorum. 83 |
84 |Colored card
90 |91 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga, cum commodi a omnis 92 | numquam quod? Totam exercitationem quos hic ipsam at qui cum numquam, sed amet 93 | ratione! Ratione, nihil dolorum. 94 |
95 |
18 |
44 |
45 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | {/*
31 |
34 |
*/}
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
47 |
81 |
82 |
48 |
51 |
52 |
53 |
54 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | {/*
64 |
67 |
*/}
68 |
69 |
70 |
73 |
74 |
75 |
76 |
79 |
80 |
84 |
118 |
119 |
85 |
88 |
89 |
90 |
91 |
94 |
95 |
96 |
97 |
98 |
99 |
100 | {/*
101 |
104 |
*/}
105 |
106 |
107 |
110 |
111 |
112 |
113 |
116 |
117 |
121 |
154 |
122 | {/* @ts-ignore */}
123 |
126 |
127 |
128 |
129 | {/* @ts-ignore */}
130 |
133 |
134 |
135 |
136 | {/* @ts-ignore */}
137 |
138 |
139 |
140 |
141 | {/* @ts-ignore */}
142 |
143 |
144 |
145 |
146 | {/* @ts-ignore */}
147 |
148 |
149 |
150 | {/* @ts-ignore */}
151 |
152 |
153 |
42 |
108 | )
109 | }
110 |
111 | export default CrateAccount
112 |
--------------------------------------------------------------------------------
/pages/example/login.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from 'react'
2 | import Link from 'next/link'
3 | import Image from 'next/image'
4 |
5 | import { Label, Input, Button, WindmillContext } from '@roketid/windmill-react-ui'
6 | import { useAuth } from 'hooks/auth'
7 | import Loader from 'example/components/Loader/Loader'
8 | import { useRouter } from 'next/router'
9 |
10 | interface IEvent {
11 | preventDefault: () => void
12 | }
13 |
14 | function LoginPage() {
15 | const [showLoader, setShowLoaderState] = useState(true)
16 |
17 | const { query } = useRouter()
18 | const { login, loading, user } = useAuth({
19 | middleware: 'guest',
20 | redirectIfAuthenticated: query.next_to as string,
21 | })
22 |
23 | const [submitting, setSubmittingState] = useState(false)
24 | const [email, setEmail] = useState('')
25 | const [password, setPassword] = useState('')
26 | const [errors, setErrors] = useState([])
27 | const [status, setStatus] = useState
43 |
107 |
44 |
54 |
104 |
105 |
106 |
45 |
52 |
53 |
63 |
139 | );
140 | }
141 |
142 | export default LoginPage
143 |
--------------------------------------------------------------------------------
/example/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useState } from 'react'
2 | import SidebarContext from 'context/SidebarContext'
3 | import {
4 | SearchIcon,
5 | MoonIcon,
6 | SunIcon,
7 | BellIcon,
8 | MenuIcon,
9 | OutlinePersonIcon,
10 | OutlineCogIcon,
11 | OutlineLogoutIcon,
12 | } from 'icons'
13 | import { Avatar, Badge, Input, Dropdown, DropdownItem, WindmillContext } from '@roketid/windmill-react-ui'
14 |
15 | interface IUser {
16 | [key: string]: any
17 | }
18 | interface IHeader {
19 | user?: IUser
20 | logout?: Function
21 | }
22 |
23 | function Header({user, logout}: IHeader) {
24 | const { mode, toggleMode } = useContext(WindmillContext)
25 | const { toggleSidebar } = useContext(SidebarContext)
26 |
27 | const [isNotificationsMenuOpen, setIsNotificationsMenuOpen] = useState(false)
28 | const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false)
29 |
30 | function handleNotificationsClick() {
31 | setIsNotificationsMenuOpen(!isNotificationsMenuOpen)
32 | }
33 |
34 | function handleProfileClick() {
35 | setIsProfileMenuOpen(!isProfileMenuOpen)
36 | }
37 |
38 | return (
39 |
64 |
138 |
65 |
75 |
135 |
136 |
137 |
66 |
73 |
74 |
41 | {/* */}
42 |
49 | {/* */}
50 |
147 |
51 |
62 |
52 |
61 |
53 |
54 |
55 |
60 | -
63 | {/* */}
64 |
- 65 | 76 | 77 | {/* */} 78 |
-
79 |
92 |
93 |
setIsNotificationsMenuOpen(false)} 97 | > 98 | 110 |99 | Messages 100 | 102 |13 101 |103 | Sales 104 | 106 |2 105 |alert('Alerts!')}> 107 | Alerts 108 | 109 |
111 | {/* */}
112 | -
113 |
126 |
setIsProfileMenuOpen(false)} 130 | > 131 | 144 |132 | 133 | Profile 134 | 135 |136 | 137 | Settings 138 | 139 |logout && logout()}> 140 | 141 | Log out 142 | 143 |
145 |
99 |
100 | {/* @ts-ignore */}
101 |
108 |
109 |
110 | {/* @ts-ignore */}
111 |
118 |
119 |
120 | {/* @ts-ignore */}
121 |
128 |
129 |
130 | {/* @ts-ignore */}
131 |
138 |
139 |
140 |
195 |
196 |
199 |
200 |
201 |
204 |
205 |
19 |
23 |
24 |
28 |
29 |
82 |
83 |
30 | {/* TODO: Check if this label is accessible, or fallback */}
31 | {/* Account Type */}
32 |
33 |
48 |
49 |
58 |
59 |
69 |
70 |
74 |
75 |
81 |
34 |
38 |
42 |
46 |
47 |
86 |
91 |
92 |
97 |
98 |
103 |
104 |
105 | {/* */}
106 |
109 |
122 |
123 |
136 |
137 |
138 | {/* */}
139 |
142 |
154 |
155 |
167 |
168 | {user?.name}
144 | 145 | 146 | 147 | ) 148 | } 149 | 150 | export default ExamplePage 151 | ``` 152 | 153 | > Note: You will need to use [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) (`user?.name` instead of `user.name`) when accessing properties on the user object to account for Next.js's initial server-side render. 154 | 155 | ## About Windmill 156 | 157 |158 |
Windmill Dashboard Next.js Typescript
159 | 160 |
161 | 162 | 163 | 164 | See the [Original Project by @estevanmaito](https://github.com/estevanmaito/windmill-dashboard-react/) 165 | 166 | - [NextJS TailwindCSS 3 and Typescript](https://wgithub.com/roketid/indmill-dashboard-nextjs-typescript) 167 | 168 | 169 | This is not a template. This is a complete application, built on top of React, with all tiny details taken care of so you just need to bring the data to feed it. 170 | 171 | Accessibility is a priority in my projects and I think it should be in yours too, so this was developed listening to real screen readers, focus traps and keyboard navigation are available everywhere. 172 | 173 | ## 📦 Features 174 | 175 | - 🦮 Throughly accessible (developed using screen readers) 176 | - 🌗 Dark theme enabled (load even different images based on theme) 177 | - 🧩 Multiple (custom) components 178 | - ⚡ Code splitting 179 | - Tailwind CSS 180 | - [Windmill React UI Documentation](https://windmillui.com/react-ui) 181 | - Heroicons 182 | - Chart.js 183 | 184 | ## 📚 Docs 185 | 186 | ### General components 187 | 188 | Windmill Dashboard React is built on top of [Windmill React UI](https://github.com/roketid/windmill-react-ui). 189 | 190 | See [Windmill React UI Documentation](https://windmillui.com/react-ui) 191 | 192 | ### Example Boilerplate 193 | 194 | All components and containers are saved in folder [example](example) 195 | 196 | ### Routing 197 | 198 | Change default redirecting when hit the `/` or `home` in file [next.config.js](next.config.js) 199 | ```js 200 | async redirects() { 201 | return [ 202 | { 203 | source: '/', 204 | destination: '/example/login', 205 | permanent: false, 206 | }, 207 | ] 208 | } 209 | ``` 210 | 211 | #### Sidebar routes 212 | 213 | To configure sidebar menus, see file ([routes/sidebar.tsx](routes/sidebar.tsx)). 214 | 215 | These are the routes that will show in the sidebar. They expect three properties: 216 | 217 | - `path`: the destination; 218 | - `name`: the name to be shown; 219 | - `icon`: an icon to illustrate the item 220 | 221 | Item that are used as dropdowns, like the Pages option, don't need a `path`, but expect a `routes` array of objects with `path` and `name`: 222 | 223 | ```js 224 | // sidebar.js 225 | { 226 | path: '/example/tables', 227 | icon: 'TablesIcon', 228 | name: 'Tables', 229 | }, 230 | { 231 | icon: 'PagesIcon', // <-- this is used as a submenu, so no path 232 | name: 'Pages', 233 | routes: [ 234 | // submenu 235 | { 236 | path: '/example/login', 237 | name: 'Login', // <-- these don't have icons 238 | }, 239 | { 240 | path: '/example/create-account', 241 | name: 'Create account', 242 | }, 243 | ``` 244 | 245 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 246 | 247 | ## Getting Started 248 | 249 | First, install dependencies : 250 | ```bash 251 | npm install 252 | # or 253 | yarn install 254 | ``` 255 | 256 | then, you can run the development server: 257 | 258 | ```bash 259 | npm run dev 260 | # or 261 | yarn dev 262 | ``` 263 | 264 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 265 | 266 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 267 | 268 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 269 | 270 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 271 | 272 | ## Learn More 273 | 274 | To learn more about Next.js, take a look at the following resources: 275 | 276 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 277 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 278 | 279 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 280 | 281 | ## Deploy on Vercel 282 | 283 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 284 | 285 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 286 | -------------------------------------------------------------------------------- /utils/demo/tableData.ts: -------------------------------------------------------------------------------- 1 | interface ITableData{ 2 | avatar: string 3 | name: string 4 | job: string 5 | amount: number 6 | status: "success" | "danger" | "warning" | "neutral" | "primary" | undefined 7 | date: string 8 | } 9 | 10 | 11 | const tableData: ITableData[] = [ 12 | { 13 | avatar: 'https://randomuser.me/api/portraits/men/64.jpg', 14 | name: 'Chandler Jacobi', 15 | job: 'Direct Security Executive', 16 | amount: 989.4, 17 | status: 'primary', 18 | date: 'Mon Feb 03 2020 04:13:15 GMT-0300 (Brasilia Standard Time)', 19 | }, 20 | { 21 | avatar: 'https://randomuser.me/api/portraits/men/76.jpg', 22 | name: 'Monserrat Marquardt', 23 | job: 'Forward Accountability Producer', 24 | amount: 471.44, 25 | status: 'danger', 26 | date: 'Fri Nov 29 2019 10:43:17 GMT-0300 (Brasilia Standard Time)', 27 | }, 28 | { 29 | avatar: 'https://randomuser.me/api/portraits/men/79.jpg', 30 | name: 'Lonie Wyman', 31 | job: 'Legacy Program Director', 32 | amount: 934.24, 33 | status: 'success', 34 | date: 'Fri Apr 03 2020 03:07:53 GMT-0300 (Brasilia Standard Time)', 35 | }, 36 | { 37 | avatar: 'https://randomuser.me/api/portraits/men/43.jpg', 38 | name: 'Corine Abernathy', 39 | job: 'Chief Factors Planner', 40 | amount: 351.28, 41 | status: 'warning', 42 | date: 'Fri Jun 21 2019 20:21:55 GMT-0300 (Brasilia Standard Time)', 43 | }, 44 | { 45 | avatar: 'https://randomuser.me/api/portraits/men/39.jpg', 46 | name: 'Lorenz Botsford', 47 | job: 'Central Accountability Developer', 48 | amount: 355.3, 49 | status: 'neutral', 50 | date: 'Wed Aug 28 2019 15:31:43 GMT-0300 (Brasilia Standard Time)', 51 | }, 52 | { 53 | avatar: 'https://randomuser.me/api/portraits/men/8.jpg', 54 | name: 'Everette Botsford', 55 | job: 'Product Group Architect', 56 | amount: 525.42, 57 | status: 'success', 58 | date: 'Thu Jan 16 2020 09:53:33 GMT-0300 (Brasilia Standard Time)', 59 | }, 60 | { 61 | avatar: 'https://randomuser.me/api/portraits/men/34.jpg', 62 | name: 'Marilou Beahan', 63 | job: 'Future Security Planner', 64 | amount: 414.99, 65 | status: 'success', 66 | date: 'Mon Oct 28 2019 14:44:31 GMT-0300 (Brasilia Standard Time)', 67 | }, 68 | { 69 | avatar: 'https://randomuser.me/api/portraits/men/80.jpg', 70 | name: 'Ceasar Sauer', 71 | job: 'Direct Brand Specialist', 72 | amount: 488.0, 73 | status: 'primary', 74 | date: 'Tue Jul 23 2019 00:24:44 GMT-0300 (Brasilia Standard Time)', 75 | }, 76 | { 77 | avatar: 'https://randomuser.me/api/portraits/men/13.jpg', 78 | name: 'Rae McDermott', 79 | job: 'Lead Branding Engineer', 80 | amount: 502.69, 81 | status: 'danger', 82 | date: 'Sat Feb 01 2020 12:57:03 GMT-0300 (Brasilia Standard Time)', 83 | }, 84 | { 85 | avatar: 'https://randomuser.me/api/portraits/men/86.jpg', 86 | name: 'Mable Steuber', 87 | job: 'National Group Executive', 88 | amount: 911.09, 89 | status: 'danger', 90 | date: 'Mon Sep 09 2019 12:03:25 GMT-0300 (Brasilia Standard Time)', 91 | }, 92 | { 93 | avatar: 'https://randomuser.me/api/portraits/men/74.jpg', 94 | name: 'Julian Glover', 95 | job: 'Global Branding Assistant', 96 | amount: 656.94, 97 | status: 'danger', 98 | date: 'Fri May 22 2020 17:46:12 GMT-0300 (Brasilia Standard Time)', 99 | }, 100 | { 101 | avatar: 'https://randomuser.me/api/portraits/men/71.jpg', 102 | name: 'Duncan Toy', 103 | job: 'Central Intranet Manager', 104 | amount: 120.78, 105 | status: 'danger', 106 | date: 'Sun Nov 17 2019 11:59:50 GMT-0300 (Brasilia Standard Time)', 107 | }, 108 | { 109 | avatar: 'https://randomuser.me/api/portraits/men/81.jpg', 110 | name: 'Blanche Friesen', 111 | job: 'Forward Identity Executive', 112 | amount: 676.95, 113 | status: 'danger', 114 | date: 'Sun Jun 21 2020 16:46:39 GMT-0300 (Brasilia Standard Time)', 115 | }, 116 | { 117 | avatar: 'https://randomuser.me/api/portraits/men/91.jpg', 118 | name: 'Orion Koepp', 119 | job: 'Global Accountability Strategist', 120 | amount: 447.56, 121 | status: 'danger', 122 | date: 'Thu Jun 04 2020 18:29:41 GMT-0300 (Brasilia Standard Time)', 123 | }, 124 | { 125 | avatar: 'https://randomuser.me/api/portraits/men/49.jpg', 126 | name: 'Dakota Vandervort', 127 | job: 'Future Assurance Coordinator', 128 | amount: 765.22, 129 | status: 'danger', 130 | date: 'Fri Jan 31 2020 13:02:55 GMT-0300 (Brasilia Standard Time)', 131 | }, 132 | { 133 | avatar: 'https://randomuser.me/api/portraits/men/85.jpg', 134 | name: 'Lily Collier', 135 | job: 'Forward Configuration Orchestrator', 136 | amount: 449.11, 137 | status: 'danger', 138 | date: 'Sun Aug 18 2019 14:52:01 GMT-0300 (Brasilia Standard Time)', 139 | }, 140 | { 141 | avatar: 'https://randomuser.me/api/portraits/men/63.jpg', 142 | name: 'Kayleigh Schumm', 143 | job: 'Central Division Agent', 144 | amount: 65.54, 145 | status: 'danger', 146 | date: 'Wed May 06 2020 17:49:09 GMT-0300 (Brasilia Standard Time)', 147 | }, 148 | { 149 | avatar: 'https://randomuser.me/api/portraits/men/25.jpg', 150 | name: 'General McGlynn', 151 | job: 'Central Web Analyst', 152 | amount: 30.51, 153 | status: 'danger', 154 | date: 'Mon Mar 30 2020 01:24:54 GMT-0300 (Brasilia Standard Time)', 155 | }, 156 | { 157 | avatar: 'https://randomuser.me/api/portraits/men/19.jpg', 158 | name: 'Shayna Schumm', 159 | job: 'Future Directives Engineer', 160 | amount: 313.73, 161 | status: 'danger', 162 | date: 'Wed Jul 03 2019 10:01:06 GMT-0300 (Brasilia Standard Time)', 163 | }, 164 | { 165 | avatar: 'https://randomuser.me/api/portraits/men/17.jpg', 166 | name: 'Giovanna Sanford', 167 | job: 'Dynamic Interactions Executive', 168 | amount: 398.3, 169 | status: 'danger', 170 | date: 'Tue Oct 08 2019 17:08:43 GMT-0300 (Brasilia Standard Time)', 171 | }, 172 | { 173 | avatar: 'https://randomuser.me/api/portraits/men/12.jpg', 174 | name: 'Emie Mante', 175 | job: 'Direct Factors Supervisor', 176 | amount: 142.51, 177 | status: 'danger', 178 | date: 'Wed Jul 24 2019 19:17:16 GMT-0300 (Brasilia Standard Time)', 179 | }, 180 | { 181 | avatar: 'https://randomuser.me/api/portraits/men/14.jpg', 182 | name: 'Chance Muller', 183 | job: 'Lead Usability Planner', 184 | amount: 963.26, 185 | status: 'danger', 186 | date: 'Sun Dec 01 2019 14:04:10 GMT-0300 (Brasilia Standard Time)', 187 | }, 188 | { 189 | avatar: 'https://randomuser.me/api/portraits/men/16.jpg', 190 | name: 'Armani Torphy', 191 | job: 'Forward Functionality Analyst', 192 | amount: 445.23, 193 | status: 'danger', 194 | date: 'Tue Dec 24 2019 13:28:36 GMT-0300 (Brasilia Standard Time)', 195 | }, 196 | { 197 | avatar: 'https://randomuser.me/api/portraits/men/19.jpg', 198 | name: 'Braeden Ward', 199 | job: 'Central Integration Director', 200 | amount: 588.53, 201 | status: 'danger', 202 | date: 'Wed Apr 15 2020 21:40:11 GMT-0300 (Brasilia Standard Time)', 203 | }, 204 | { 205 | avatar: 'https://randomuser.me/api/portraits/men/20.jpg', 206 | name: 'Malcolm Price', 207 | job: 'District Program Planner', 208 | amount: 181.93, 209 | status: 'danger', 210 | date: 'Thu Oct 24 2019 07:09:03 GMT-0300 (Brasilia Standard Time)', 211 | }, 212 | { 213 | avatar: 'https://randomuser.me/api/portraits/men/21.jpg', 214 | name: 'Susan Jast', 215 | job: 'Future Paradigm Associate', 216 | amount: 928.41, 217 | status: 'danger', 218 | date: 'Sun Feb 09 2020 23:22:23 GMT-0300 (Brasilia Standard Time)', 219 | }, 220 | { 221 | avatar: 'https://randomuser.me/api/portraits/men/31.jpg', 222 | name: 'Torrey Reynolds', 223 | job: 'Lead Security Agent', 224 | amount: 447.37, 225 | status: 'danger', 226 | date: 'Mon Oct 28 2019 04:10:39 GMT-0300 (Brasilia Standard Time)', 227 | }, 228 | { 229 | avatar: 'https://randomuser.me/api/portraits/men/48.jpg', 230 | name: 'Travon Harber', 231 | job: 'Legacy Marketing Facilitator', 232 | amount: 422.48, 233 | status: 'danger', 234 | date: 'Sat Nov 09 2019 05:04:09 GMT-0300 (Brasilia Standard Time)', 235 | }, 236 | { 237 | avatar: 'https://randomuser.me/api/portraits/men/58.jpg', 238 | name: 'Hattie Gutkowski', 239 | job: 'Chief Configuration Supervisor', 240 | amount: 714.34, 241 | status: 'danger', 242 | date: 'Tue Oct 22 2019 22:36:23 GMT-0300 (Brasilia Standard Time)', 243 | }, 244 | { 245 | avatar: 'https://randomuser.me/api/portraits/men/34.jpg', 246 | name: 'Demarco Lang', 247 | job: 'Investor Program Designer', 248 | amount: 536.92, 249 | status: 'danger', 250 | date: 'Wed Apr 08 2020 03:05:59 GMT-0300 (Brasilia Standard Time)', 251 | }, 252 | { 253 | avatar: 'https://randomuser.me/api/portraits/men/64.jpg', 254 | name: 'Glennie Ziemann', 255 | job: 'Dynamic Interactions Analyst', 256 | amount: 597.25, 257 | status: 'danger', 258 | date: 'Mon Jun 22 2020 21:27:06 GMT-0300 (Brasilia Standard Time)', 259 | }, 260 | { 261 | avatar: 'https://randomuser.me/api/portraits/men/73.jpg', 262 | name: 'Alta Howe', 263 | job: 'District Intranet Executive', 264 | amount: 42.28, 265 | status: 'danger', 266 | date: 'Sat Oct 12 2019 22:57:22 GMT-0300 (Brasilia Standard Time)', 267 | }, 268 | { 269 | avatar: 'https://randomuser.me/api/portraits/men/66.jpg', 270 | name: 'Sydnee Gottlieb', 271 | job: 'Global Response Specialist', 272 | amount: 868.92, 273 | status: 'danger', 274 | date: 'Wed Feb 05 2020 05:17:34 GMT-0300 (Brasilia Standard Time)', 275 | }, 276 | { 277 | avatar: 'https://randomuser.me/api/portraits/men/23.jpg', 278 | name: 'Arlene Schmitt', 279 | job: 'Lead Metrics Consultant', 280 | amount: 364.68, 281 | status: 'danger', 282 | date: 'Thu Oct 03 2019 08:47:32 GMT-0300 (Brasilia Standard Time)', 283 | }, 284 | { 285 | avatar: 'https://randomuser.me/api/portraits/men/98.jpg', 286 | name: 'Hilda Schoen', 287 | job: 'National Solutions Facilitator', 288 | amount: 260.91, 289 | status: 'danger', 290 | date: 'Wed Dec 04 2019 06:28:30 GMT-0300 (Brasilia Standard Time)', 291 | }, 292 | { 293 | avatar: 'https://randomuser.me/api/portraits/men/72.jpg', 294 | name: 'Chase Bahringer', 295 | job: 'Dynamic Communications Designer', 296 | amount: 454.61, 297 | status: 'danger', 298 | date: 'Mon Nov 25 2019 16:59:38 GMT-0300 (Brasilia Standard Time)', 299 | }, 300 | { 301 | avatar: 'https://randomuser.me/api/portraits/men/91.jpg', 302 | name: 'Lucile Hansen', 303 | job: 'Customer Usability Facilitator', 304 | amount: 982.22, 305 | status: 'danger', 306 | date: 'Sun Aug 25 2019 17:15:59 GMT-0300 (Brasilia Standard Time)', 307 | }, 308 | { 309 | avatar: 'https://randomuser.me/api/portraits/men/59.jpg', 310 | name: 'Mollie Heaney', 311 | job: 'Forward Communications Director', 312 | amount: 390.33, 313 | status: 'danger', 314 | date: 'Mon Jul 22 2019 01:45:19 GMT-0300 (Brasilia Standard Time)', 315 | }, 316 | { 317 | avatar: 'https://randomuser.me/api/portraits/men/32.jpg', 318 | name: 'Bennie Kuvalis', 319 | job: 'Future Factors Agent', 320 | amount: 456.64, 321 | status: 'danger', 322 | date: 'Sat Feb 08 2020 07:55:08 GMT-0300 (Brasilia Standard Time)', 323 | }, 324 | { 325 | avatar: 'https://randomuser.me/api/portraits/men/84.jpg', 326 | name: 'Jodie Luettgen', 327 | job: 'Customer Implementation Associate', 328 | amount: 398.37, 329 | status: 'danger', 330 | date: 'Tue Jun 09 2020 11:19:53 GMT-0300 (Brasilia Standard Time)', 331 | }, 332 | { 333 | avatar: 'https://randomuser.me/api/portraits/men/43.jpg', 334 | name: 'Bethel Quitzon', 335 | job: 'Dynamic Web Strategist', 336 | amount: 183.58, 337 | status: 'danger', 338 | date: 'Sun Dec 29 2019 18:56:54 GMT-0300 (Brasilia Standard Time)', 339 | }, 340 | { 341 | avatar: 'https://randomuser.me/api/portraits/men/67.jpg', 342 | name: 'Jon Dietrich', 343 | job: 'Legacy Creative Planner', 344 | amount: 439.01, 345 | status: 'danger', 346 | date: 'Sun Dec 29 2019 11:11:34 GMT-0300 (Brasilia Standard Time)', 347 | }, 348 | { 349 | avatar: 'https://randomuser.me/api/portraits/men/89.jpg', 350 | name: 'Nakia Kihn', 351 | job: 'Central Interactions Coordinator', 352 | amount: 824.12, 353 | status: 'danger', 354 | date: 'Sun Sep 15 2019 06:43:56 GMT-0300 (Brasilia Standard Time)', 355 | }, 356 | { 357 | avatar: 'https://randomuser.me/api/portraits/men/44.jpg', 358 | name: 'Assunta Grady', 359 | job: 'Investor Operations Specialist', 360 | amount: 172.97, 361 | status: 'danger', 362 | date: 'Tue Dec 17 2019 01:46:37 GMT-0300 (Brasilia Standard Time)', 363 | }, 364 | { 365 | avatar: 'https://randomuser.me/api/portraits/men/78.jpg', 366 | name: 'Lukas Klocko', 367 | job: 'Human Usability Associate', 368 | amount: 515.74, 369 | status: 'danger', 370 | date: 'Mon Jun 15 2020 04:04:32 GMT-0300 (Brasilia Standard Time)', 371 | }, 372 | ] 373 | 374 | export default tableData 375 | export type { 376 | ITableData 377 | } 378 | --------------------------------------------------------------------------------