coreui-free-react-admin-template

1
import React from 'react'
2
import classNames from 'classnames'
3

4
import {
5
  CAvatar,
6
  CButton,
7
  CButtonGroup,
8
  CCard,
9
  CCardBody,
10
  CCardFooter,
11
  CCardHeader,
12
  CCol,
13
  CProgress,
14
  CRow,
15
  CTable,
16
  CTableBody,
17
  CTableDataCell,
18
  CTableHead,
19
  CTableHeaderCell,
20
  CTableRow,
21
} from '@coreui/react'
22
import CIcon from '@coreui/icons-react'
23
import {
24
  cibCcAmex,
25
  cibCcApplePay,
26
  cibCcMastercard,
27
  cibCcPaypal,
28
  cibCcStripe,
29
  cibCcVisa,
30
  cibGoogle,
31
  cibFacebook,
32
  cibLinkedin,
33
  cifBr,
34
  cifEs,
35
  cifFr,
36
  cifIn,
37
  cifPl,
38
  cifUs,
39
  cibTwitter,
40
  cilCloudDownload,
41
  cilPeople,
42
  cilUser,
43
  cilUserFemale,
44
} from '@coreui/icons'
45

46
import avatar1 from 'src/assets/images/avatars/1.jpg'
47
import avatar2 from 'src/assets/images/avatars/2.jpg'
48
import avatar3 from 'src/assets/images/avatars/3.jpg'
49
import avatar4 from 'src/assets/images/avatars/4.jpg'
50
import avatar5 from 'src/assets/images/avatars/5.jpg'
51
import avatar6 from 'src/assets/images/avatars/6.jpg'
52

53
import WidgetsBrand from '../widgets/WidgetsBrand'
54
import WidgetsDropdown from '../widgets/WidgetsDropdown'
55
import MainChart from './MainChart'
56

57
const Dashboard = () => {
58
  const progressExample = [
59
    { title: 'Visits', value: '29.703 Users', percent: 40, color: 'success' },
60
    { title: 'Unique', value: '24.093 Users', percent: 20, color: 'info' },
61
    { title: 'Pageviews', value: '78.706 Views', percent: 60, color: 'warning' },
62
    { title: 'New Users', value: '22.123 Users', percent: 80, color: 'danger' },
63
    { title: 'Bounce Rate', value: 'Average Rate', percent: 40.15, color: 'primary' },
64
  ]
65

66
  const progressGroupExample1 = [
67
    { title: 'Monday', value1: 34, value2: 78 },
68
    { title: 'Tuesday', value1: 56, value2: 94 },
69
    { title: 'Wednesday', value1: 12, value2: 67 },
70
    { title: 'Thursday', value1: 43, value2: 91 },
71
    { title: 'Friday', value1: 22, value2: 73 },
72
    { title: 'Saturday', value1: 53, value2: 82 },
73
    { title: 'Sunday', value1: 9, value2: 69 },
74
  ]
75

76
  const progressGroupExample2 = [
77
    { title: 'Male', icon: cilUser, value: 53 },
78
    { title: 'Female', icon: cilUserFemale, value: 43 },
79
  ]
80

81
  const progressGroupExample3 = [
82
    { title: 'Organic Search', icon: cibGoogle, percent: 56, value: '191,235' },
83
    { title: 'Facebook', icon: cibFacebook, percent: 15, value: '51,223' },
84
    { title: 'Twitter', icon: cibTwitter, percent: 11, value: '37,564' },
85
    { title: 'LinkedIn', icon: cibLinkedin, percent: 8, value: '27,319' },
86
  ]
87

88
  const tableExample = [
89
    {
90
      avatar: { src: avatar1, status: 'success' },
91
      user: {
92
        name: 'Yiorgos Avraamu',
93
        new: true,
94
        registered: 'Jan 1, 2023',
95
      },
96
      country: { name: 'USA', flag: cifUs },
97
      usage: {
98
        value: 50,
99
        period: 'Jun 11, 2023 - Jul 10, 2023',
100
        color: 'success',
101
      },
102
      payment: { name: 'Mastercard', icon: cibCcMastercard },
103
      activity: '10 sec ago',
104
    },
105
    {
106
      avatar: { src: avatar2, status: 'danger' },
107
      user: {
108
        name: 'Avram Tarasios',
109
        new: false,
110
        registered: 'Jan 1, 2023',
111
      },
112
      country: { name: 'Brazil', flag: cifBr },
113
      usage: {
114
        value: 22,
115
        period: 'Jun 11, 2023 - Jul 10, 2023',
116
        color: 'info',
117
      },
118
      payment: { name: 'Visa', icon: cibCcVisa },
119
      activity: '5 minutes ago',
120
    },
121
    {
122
      avatar: { src: avatar3, status: 'warning' },
123
      user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
124
      country: { name: 'India', flag: cifIn },
125
      usage: {
126
        value: 74,
127
        period: 'Jun 11, 2023 - Jul 10, 2023',
128
        color: 'warning',
129
      },
130
      payment: { name: 'Stripe', icon: cibCcStripe },
131
      activity: '1 hour ago',
132
    },
133
    {
134
      avatar: { src: avatar4, status: 'secondary' },
135
      user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
136
      country: { name: 'France', flag: cifFr },
137
      usage: {
138
        value: 98,
139
        period: 'Jun 11, 2023 - Jul 10, 2023',
140
        color: 'danger',
141
      },
142
      payment: { name: 'PayPal', icon: cibCcPaypal },
143
      activity: 'Last month',
144
    },
145
    {
146
      avatar: { src: avatar5, status: 'success' },
147
      user: {
148
        name: 'Agapetus Tadeáš',
149
        new: true,
150
        registered: 'Jan 1, 2023',
151
      },
152
      country: { name: 'Spain', flag: cifEs },
153
      usage: {
154
        value: 22,
155
        period: 'Jun 11, 2023 - Jul 10, 2023',
156
        color: 'primary',
157
      },
158
      payment: { name: 'Google Wallet', icon: cibCcApplePay },
159
      activity: 'Last week',
160
    },
161
    {
162
      avatar: { src: avatar6, status: 'danger' },
163
      user: {
164
        name: 'Friderik Dávid',
165
        new: true,
166
        registered: 'Jan 1, 2023',
167
      },
168
      country: { name: 'Poland', flag: cifPl },
169
      usage: {
170
        value: 43,
171
        period: 'Jun 11, 2023 - Jul 10, 2023',
172
        color: 'success',
173
      },
174
      payment: { name: 'Amex', icon: cibCcAmex },
175
      activity: 'Last week',
176
    },
177
  ]
178

179
  return (
180
    <>
181
      <WidgetsDropdown className="mb-4" />
182
      <CCard className="mb-4">
183
        <CCardBody>
184
          <CRow>
185
            <CCol sm={5}>
186
              <h4 id="traffic" className="card-title mb-0">
187
                Traffic
188
              </h4>
189
              <div className="small text-body-secondary">January - July 2023</div>
190
            </CCol>
191
            <CCol sm={7} className="d-none d-md-block">
192
              <CButton color="primary" className="float-end">
193
                <CIcon icon={cilCloudDownload} />
194
              </CButton>
195
              <CButtonGroup className="float-end me-3">
196
                {['Day', 'Month', 'Year'].map((value) => (
197
                  <CButton
198
                    color="outline-secondary"
199
                    key={value}
200
                    className="mx-0"
201
                    active={value === 'Month'}
202
                  >
203
                    {value}
204
                  </CButton>
205
                ))}
206
              </CButtonGroup>
207
            </CCol>
208
          </CRow>
209
          <MainChart />
210
        </CCardBody>
211
        <CCardFooter>
212
          <CRow
213
            xs={{ cols: 1, gutter: 4 }}
214
            sm={{ cols: 2 }}
215
            lg={{ cols: 4 }}
216
            xl={{ cols: 5 }}
217
            className="mb-2 text-center"
218
          >
219
            {progressExample.map((item, index, items) => (
220
              <CCol
221
                className={classNames({
222
                  'd-none d-xl-block': index + 1 === items.length,
223
                })}
224
                key={index}
225
              >
226
                <div className="text-body-secondary">{item.title}</div>
227
                <div className="fw-semibold text-truncate">
228
                  {item.value} ({item.percent}%)
229
                </div>
230
                <CProgress thin className="mt-2" color={item.color} value={item.percent} />
231
              </CCol>
232
            ))}
233
          </CRow>
234
        </CCardFooter>
235
      </CCard>
236
      <WidgetsBrand className="mb-4" withCharts />
237
      <CRow>
238
        <CCol xs>
239
          <CCard className="mb-4">
240
            <CCardHeader>Traffic {' & '} Sales</CCardHeader>
241
            <CCardBody>
242
              <CRow>
243
                <CCol xs={12} md={6} xl={6}>
244
                  <CRow>
245
                    <CCol xs={6}>
246
                      <div className="border-start border-start-4 border-start-info py-1 px-3">
247
                        <div className="text-body-secondary text-truncate small">New Clients</div>
248
                        <div className="fs-5 fw-semibold">9,123</div>
249
                      </div>
250
                    </CCol>
251
                    <CCol xs={6}>
252
                      <div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
253
                        <div className="text-body-secondary text-truncate small">
254
                          Recurring Clients
255
                        </div>
256
                        <div className="fs-5 fw-semibold">22,643</div>
257
                      </div>
258
                    </CCol>
259
                  </CRow>
260
                  <hr className="mt-0" />
261
                  {progressGroupExample1.map((item, index) => (
262
                    <div className="progress-group mb-4" key={index}>
263
                      <div className="progress-group-prepend">
264
                        <span className="text-body-secondary small">{item.title}</span>
265
                      </div>
266
                      <div className="progress-group-bars">
267
                        <CProgress thin color="info" value={item.value1} />
268
                        <CProgress thin color="danger" value={item.value2} />
269
                      </div>
270
                    </div>
271
                  ))}
272
                </CCol>
273
                <CCol xs={12} md={6} xl={6}>
274
                  <CRow>
275
                    <CCol xs={6}>
276
                      <div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
277
                        <div className="text-body-secondary text-truncate small">Pageviews</div>
278
                        <div className="fs-5 fw-semibold">78,623</div>
279
                      </div>
280
                    </CCol>
281
                    <CCol xs={6}>
282
                      <div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
283
                        <div className="text-body-secondary text-truncate small">Organic</div>
284
                        <div className="fs-5 fw-semibold">49,123</div>
285
                      </div>
286
                    </CCol>
287
                  </CRow>
288

289
                  <hr className="mt-0" />
290

291
                  {progressGroupExample2.map((item, index) => (
292
                    <div className="progress-group mb-4" key={index}>
293
                      <div className="progress-group-header">
294
                        <CIcon className="me-2" icon={item.icon} size="lg" />
295
                        <span>{item.title}</span>
296
                        <span className="ms-auto fw-semibold">{item.value}%</span>
297
                      </div>
298
                      <div className="progress-group-bars">
299
                        <CProgress thin color="warning" value={item.value} />
300
                      </div>
301
                    </div>
302
                  ))}
303

304
                  <div className="mb-5"></div>
305

306
                  {progressGroupExample3.map((item, index) => (
307
                    <div className="progress-group" key={index}>
308
                      <div className="progress-group-header">
309
                        <CIcon className="me-2" icon={item.icon} size="lg" />
310
                        <span>{item.title}</span>
311
                        <span className="ms-auto fw-semibold">
312
                          {item.value}{' '}
313
                          <span className="text-body-secondary small">({item.percent}%)</span>
314
                        </span>
315
                      </div>
316
                      <div className="progress-group-bars">
317
                        <CProgress thin color="success" value={item.percent} />
318
                      </div>
319
                    </div>
320
                  ))}
321
                </CCol>
322
              </CRow>
323

324
              <br />
325

326
              <CTable align="middle" className="mb-0 border" hover responsive>
327
                <CTableHead className="text-nowrap">
328
                  <CTableRow>
329
                    <CTableHeaderCell className="bg-body-tertiary text-center">
330
                      <CIcon icon={cilPeople} />
331
                    </CTableHeaderCell>
332
                    <CTableHeaderCell className="bg-body-tertiary">User</CTableHeaderCell>
333
                    <CTableHeaderCell className="bg-body-tertiary text-center">
334
                      Country
335
                    </CTableHeaderCell>
336
                    <CTableHeaderCell className="bg-body-tertiary">Usage</CTableHeaderCell>
337
                    <CTableHeaderCell className="bg-body-tertiary text-center">
338
                      Payment Method
339
                    </CTableHeaderCell>
340
                    <CTableHeaderCell className="bg-body-tertiary">Activity</CTableHeaderCell>
341
                  </CTableRow>
342
                </CTableHead>
343
                <CTableBody>
344
                  {tableExample.map((item, index) => (
345
                    <CTableRow v-for="item in tableItems" key={index}>
346
                      <CTableDataCell className="text-center">
347
                        <CAvatar size="md" src={item.avatar.src} status={item.avatar.status} />
348
                      </CTableDataCell>
349
                      <CTableDataCell>
350
                        <div>{item.user.name}</div>
351
                        <div className="small text-body-secondary text-nowrap">
352
                          <span>{item.user.new ? 'New' : 'Recurring'}</span> | Registered:{' '}
353
                          {item.user.registered}
354
                        </div>
355
                      </CTableDataCell>
356
                      <CTableDataCell className="text-center">
357
                        <CIcon size="xl" icon={item.country.flag} title={item.country.name} />
358
                      </CTableDataCell>
359
                      <CTableDataCell>
360
                        <div className="d-flex justify-content-between text-nowrap">
361
                          <div className="fw-semibold">{item.usage.value}%</div>
362
                          <div className="ms-3">
363
                            <small className="text-body-secondary">{item.usage.period}</small>
364
                          </div>
365
                        </div>
366
                        <CProgress thin color={item.usage.color} value={item.usage.value} />
367
                      </CTableDataCell>
368
                      <CTableDataCell className="text-center">
369
                        <CIcon size="xl" icon={item.payment.icon} />
370
                      </CTableDataCell>
371
                      <CTableDataCell>
372
                        <div className="small text-body-secondary text-nowrap">Last login</div>
373
                        <div className="fw-semibold text-nowrap">{item.activity}</div>
374
                      </CTableDataCell>
375
                    </CTableRow>
376
                  ))}
377
                </CTableBody>
378
              </CTable>
379
            </CCardBody>
380
          </CCard>
381
        </CCol>
382
      </CRow>
383
    </>
384
  )
385
}
386

387
export default Dashboard
388