From a21075da1a4099c822a93b3c686b0655837b120c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Mon, 4 Oct 2021 18:31:07 +0200
Subject: [PATCH] refactor: update dashboard view

---
 src/views/dashboard/Dashboard.js | 526 +++++++++++--------------------
 1 file changed, 189 insertions(+), 337 deletions(-)

diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index 500ec5c..18d1009 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -59,6 +59,119 @@ const Dashboard = () => {
     return Math.floor(Math.random() * (max - min + 1) + min)
   }
 
+  const progressGroupExample1 = [
+    { title: 'Monday', value1: 34, value2: 78 },
+    { title: 'Tuesday', value1: 56, value2: 94 },
+    { title: 'Wednesday', value1: 12, value2: 67 },
+    { title: 'Thursday', value1: 43, value2: 91 },
+    { title: 'Friday', value1: 22, value2: 73 },
+    { title: 'Saturday', value1: 53, value2: 82 },
+    { title: 'Sunday', value1: 9, value2: 69 },
+  ]
+
+  const progressGroupExample2 = [
+    { title: 'Male', icon: cilUser, value: 53 },
+    { title: 'Female', icon: cilUserFemale, value: 43 },
+  ]
+
+  const progressGroupExample3 = [
+    { title: 'Organic Search', icon: cibGoogle, percent: 56, value: '191,235' },
+    { title: 'Facebook', icon: cibFacebook, percent: 15, value: '51,223' },
+    { title: 'Twitter', icon: cibTwitter, percent: 11, value: '37,564' },
+    { title: 'LinkedIn', icon: cibLinkedin, percent: 8, value: '27,319' },
+  ]
+
+  const tableExample = [
+    {
+      avatar: { src: avatar1, status: 'success' },
+      user: {
+        name: 'Yiorgos Avraamu',
+        new: true,
+        registered: 'Jan 1, 2021',
+      },
+      country: { name: 'USA', flag: cifUs },
+      usage: {
+        value: 50,
+        period: 'Jun 11, 2021 - Jul 10, 2021',
+        color: 'success',
+      },
+      payment: { name: 'Mastercard', icon: cibCcMastercard },
+      activity: '10 sec ago',
+    },
+    {
+      avatar: { src: avatar2, status: 'danger' },
+      user: {
+        name: 'Avram Tarasios',
+        new: false,
+        registered: 'Jan 1, 2021',
+      },
+      country: { name: 'Brazil', flag: cifBr },
+      usage: {
+        value: 22,
+        period: 'Jun 11, 2021 - Jul 10, 2021',
+        color: 'info',
+      },
+      payment: { name: 'Visa', icon: cibCcVisa },
+      activity: '5 minutes ago',
+    },
+    {
+      avatar: { src: avatar3, status: 'warning' },
+      user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2021' },
+      country: { name: 'India', flag: cifIn },
+      usage: {
+        value: 74,
+        period: 'Jun 11, 2021 - Jul 10, 2021',
+        color: 'warning',
+      },
+      payment: { name: 'Stripe', icon: cibCcStripe },
+      activity: '1 hour ago',
+    },
+    {
+      avatar: { src: avatar4, status: 'secondary' },
+      user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2021' },
+      country: { name: 'France', flag: cifFr },
+      usage: {
+        value: 98,
+        period: 'Jun 11, 2021 - Jul 10, 2021',
+        color: 'danger',
+      },
+      payment: { name: 'PayPal', icon: cibCcPaypal },
+      activity: 'Last month',
+    },
+    {
+      avatar: { src: avatar5, status: 'success' },
+      user: {
+        name: 'Agapetus Tadeáš',
+        new: true,
+        registered: 'Jan 1, 2021',
+      },
+      country: { name: 'Spain', flag: cifEs },
+      usage: {
+        value: 22,
+        period: 'Jun 11, 2021 - Jul 10, 2021',
+        color: 'primary',
+      },
+      payment: { name: 'Google Wallet', icon: cibCcApplePay },
+      activity: 'Last week',
+    },
+    {
+      avatar: { src: avatar6, status: 'danger' },
+      user: {
+        name: 'Friderik Dávid',
+        new: true,
+        registered: 'Jan 1, 2021',
+      },
+      country: { name: 'Poland', flag: cifPl },
+      usage: {
+        value: 43,
+        period: 'Jun 11, 2021 - Jul 10, 2021',
+        color: 'success',
+      },
+      payment: { name: 'Amex', icon: cibCcAmex },
+      activity: 'Last week',
+    },
+  ]
+
   return (
     <>
       <WidgetsDropdown />
@@ -179,27 +292,27 @@ const Dashboard = () => {
             <CCol className="mb-sm-2 mb-0">
               <div className="text-medium-emphasis">Visits</div>
               <strong>29.703 Users (40%)</strong>
-              <CProgress thin className="mt-2" precision={1} color="success" value={40} />
+              <CProgress thin className="mt-2" color="success" value={40} />
             </CCol>
             <CCol className="mb-sm-2 mb-0">
               <div className="text-medium-emphasis">Unique</div>
               <strong>24.093 Users (20%)</strong>
-              <CProgress thin className="mt-2" precision={1} color="info" value={40} />
+              <CProgress thin className="mt-2" color="info" value={40} />
             </CCol>
             <CCol className="mb-sm-2 mb-0">
               <div className="text-medium-emphasis">Pageviews</div>
               <strong>78.706 Views (60%)</strong>
-              <CProgress thin className="mt-2" precision={1} color="warning" value={40} />
+              <CProgress thin className="mt-2" color="warning" value={40} />
             </CCol>
             <CCol className="mb-sm-2 mb-0">
               <div className="text-medium-emphasis">New Users</div>
               <strong>22.123 Users (80%)</strong>
-              <CProgress thin className="mt-2" precision={1} color="danger" value={40} />
+              <CProgress thin className="mt-2" color="danger" value={40} />
             </CCol>
             <CCol className="mb-sm-2 mb-0">
               <div className="text-medium-emphasis">Bounce Rate</div>
               <strong>Average Rate (40.15%)</strong>
-              <CProgress thin className="mt-2" precision={1} value={40} />
+              <CProgress thin className="mt-2" value={40} />
             </CCol>
           </CRow>
         </CCardFooter>
@@ -230,70 +343,17 @@ const Dashboard = () => {
                   </CRow>
 
                   <hr className="mt-0" />
-
-                  <div className="progress-group mb-4">
-                    <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">Monday</span>
+                  {progressGroupExample1.map((item, index) => (
+                    <div className="progress-group mb-4" key={index}>
+                      <div className="progress-group-prepend">
+                        <span className="text-medium-emphasis small">{item.title}</span>
+                      </div>
+                      <div className="progress-group-bars">
+                        <CProgress thin color="info" value={item.value1} />
+                        <CProgress thin color="danger" value={item.value2} />
+                      </div>
                     </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="info" value={34} />
-                      <CProgress thin color="danger" value={78} />
-                    </div>
-                  </div>
-                  <div className="progress-group mb-4">
-                    <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">Tuesday</span>
-                    </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="info" value={56} />
-                      <CProgress thin color="danger" value={94} />
-                    </div>
-                  </div>
-                  <div className="progress-group mb-4">
-                    <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">Wednesday</span>
-                    </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="info" value={12} />
-                      <CProgress thin color="danger" value={67} />
-                    </div>
-                  </div>
-                  <div className="progress-group mb-4">
-                    <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">Thursday</span>
-                    </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="info" value={43} />
-                      <CProgress thin color="danger" value={91} />
-                    </div>
-                  </div>
-                  <div className="progress-group mb-4">
-                    <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">Friday</span>
-                    </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="info" value={22} />
-                      <CProgress thin color="danger" value={73} />
-                    </div>
-                  </div>
-                  <div className="progress-group mb-4">
-                    <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">Saturday</span>
-                    </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="info" value={53} />
-                      <CProgress thin color="danger" value={82} />
-                    </div>
-                  </div>
-                  <div className="progress-group mb-4">
-                    <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">Sunday</span>
-                    </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="info" value={9} />
-                      <CProgress thin color="danger" value={69} />
-                    </div>
-                  </div>
+                  ))}
                 </CCol>
 
                 <CCol xs={12} md={6} xl={6}>
@@ -314,81 +374,42 @@ const Dashboard = () => {
 
                   <hr className="mt-0" />
 
-                  <div className="progress-group mb-4">
-                    <div className="progress-group-header">
-                      <CIcon className="icon icon-lg me-2" icon={cilUser} />
-                      <span>Male</span>
-                      <span className="ms-auto font-semibold">43%</span>
+                  {progressGroupExample2.map((item, index) => (
+                    <div className="progress-group mb-4" key={index}>
+                      <div className="progress-group-header">
+                        <CIcon className="me-2" icon={item.icon} size="lg" />
+                        <span>{item.title}</span>
+                        <span className="ms-auto fw-semibold">{item.value}%</span>
+                      </div>
+                      <div className="progress-group-bars">
+                        <CProgress thin color="warning" value={item.value} />
+                      </div>
                     </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="warning" value={43} />
-                    </div>
-                  </div>
-                  <div className="progress-group mb-5">
-                    <div className="progress-group-header">
-                      <CIcon className="icon icon-lg me-2" icon={cilUserFemale} />
-                      <span>Female</span>
-                      <span className="ms-auto font-semibold">37%</span>
-                    </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="warning" value={37} />
-                    </div>
-                  </div>
+                  ))}
 
-                  <div className="progress-group">
-                    <div className="progress-group-header">
-                      <CIcon className="icon icon-lg me-2" icon={cibGoogle} />
-                      <span>Organic Search</span>
-                      <span className="ms-auto font-semibold">
-                        191,235 <span className="text-medium-emphasis small">(56%)</span>
-                      </span>
+                  <div className="mb-5"></div>
+
+                  {progressGroupExample3.map((item, index) => (
+                    <div className="progress-group" key={index}>
+                      <div className="progress-group-header">
+                        <CIcon className="me-2" icon={item.icon} size="lg" />
+                        <span>{item.title}</span>
+                        <span className="ms-auto fw-semibold">
+                          {item.value}{' '}
+                          <span className="text-medium-emphasis small">({item.percent}%)</span>
+                        </span>
+                      </div>
+                      <div className="progress-group-bars">
+                        <CProgress thin color="success" value={item.percent} />
+                      </div>
                     </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="success" value={56} />
-                    </div>
-                  </div>
-                  <div className="progress-group">
-                    <div className="progress-group-header">
-                      <CIcon className="icon icon-lg me-2" icon={cibFacebook} />
-                      <span>Facebook</span>
-                      <span className="ms-auto font-semibold">
-                        51,223 <span className="text-medium-emphasis small">(15%)</span>
-                      </span>
-                    </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="success" value={15} />
-                    </div>
-                  </div>
-                  <div className="progress-group">
-                    <div className="progress-group-header">
-                      <CIcon className="icon icon-lg me-2" icon={cibTwitter} />
-                      <span>Twitter</span>
-                      <span className="ms-auto font-semibold">
-                        37,564 <span className="text-medium-emphasis small">(11%)</span>
-                      </span>
-                    </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="success" value={11} />
-                    </div>
-                  </div>
-                  <div className="progress-group">
-                    <div className="progress-group-header">
-                      <CIcon className="icon icon-lg me-2" icon={cibLinkedin} />
-                      <span>LinkedIn</span>
-                      <span className="ms-auto font-semibold">
-                        27,319 <span className="text-medium-emphasis small">(8%)</span>
-                      </span>
-                    </div>
-                    <div className="progress-group-bars">
-                      <CProgress thin color="success" value={8} />
-                    </div>
-                  </div>
+                  ))}
                 </CCol>
               </CRow>
 
               <br />
 
-              <CTable hover responsive align="middle" className="mb-0 border">
+              <CTable align="middle" className="mb-0 border" hover responsive>
                 <CTableHead color="light">
                   <CTableRow>
                     <CTableHeaderCell className="text-center">
@@ -402,210 +423,41 @@ const Dashboard = () => {
                   </CTableRow>
                 </CTableHead>
                 <CTableBody>
-                  <CTableRow>
-                    <CTableDataCell className="text-center">
-                      <CAvatar size="md" src={avatar1} status="success" />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div>Yiorgos Avraamu</div>
-                      <div className="small text-medium-emphasis">
-                        <span>New</span> | Registered: Jan 1, 2015
-                      </div>
-                    </CTableDataCell>
-                    <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon={cifUs} title="us" id="us" />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div className="clearfix">
-                        <div className="float-start">
-                          <strong>50%</strong>
+                  {tableExample.map((item, index) => (
+                    <CTableRow v-for="item in tableItems" key={index}>
+                      <CTableDataCell className="text-center">
+                        <CAvatar size="md" src={item.avatar.src} status={item.avatar.status} />
+                      </CTableDataCell>
+                      <CTableDataCell>
+                        <div>{item.user.name}</div>
+                        <div className="small text-medium-emphasis">
+                          <span>{item.user.new ? 'New' : 'Recurring'}</span> | Registered:{' '}
+                          {item.user.registered}
                         </div>
-                        <div className="float-end">
-                          <small className="text-medium-emphasis">
-                            Jun 11, 2015 - Jul 10, 2015
-                          </small>
+                      </CTableDataCell>
+                      <CTableDataCell className="text-center">
+                        <CIcon size="xl" icon={item.country.flag} title={item.country.name} />
+                      </CTableDataCell>
+                      <CTableDataCell>
+                        <div className="clearfix">
+                          <div className="float-start">
+                            <strong>{item.usage.value}%</strong>
+                          </div>
+                          <div className="float-end">
+                            <small className="text-medium-emphasis">{item.usage.period}</small>
+                          </div>
                         </div>
-                      </div>
-                      <CProgress thin color="success" value={50} />
-                    </CTableDataCell>
-                    <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon={cibCcMastercard} />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div className="small text-medium-emphasis">Last login</div>
-                      <strong>10 sec ago</strong>
-                    </CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableDataCell className="text-center">
-                      <CAvatar size="md" src={avatar2} status="danger" />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div>Avram Tarasios</div>
-                      <div className="small text-medium-emphasis">
-                        <span>Recurring</span> | Registered: Jan 1, 2015
-                      </div>
-                    </CTableDataCell>
-                    <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon={cifBr} title="br" id="br" />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div className="clearfix">
-                        <div className="float-start">
-                          <strong>10%</strong>
-                        </div>
-                        <div className="float-end">
-                          <small className="text-medium-emphasis">
-                            Jun 11, 2015 - Jul 10, 2015
-                          </small>
-                        </div>
-                      </div>
-                      <CProgress thin color="info" value={10} />
-                    </CTableDataCell>
-                    <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon={cibCcVisa} />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div className="small text-medium-emphasis">Last login</div>
-                      <strong>5 minutes ago</strong>
-                    </CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableDataCell className="text-center">
-                      <CAvatar size="md" src={avatar3} status="warning" />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div>Quintin Ed</div>
-                      <div className="small text-medium-emphasis">
-                        <span>New</span> | Registered: Jan 1, 2015
-                      </div>
-                    </CTableDataCell>
-                    <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon={cifIn} title="in" id="in" />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div className="clearfix">
-                        <div className="float-start">
-                          <strong>74%</strong>
-                        </div>
-                        <div className="float-end">
-                          <small className="text-medium-emphasis">
-                            Jun 11, 2015 - Jul 10, 2015
-                          </small>
-                        </div>
-                      </div>
-                      <CProgress thin color="warning" value={74} />
-                    </CTableDataCell>
-                    <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon={cibCcStripe} />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div className="small text-medium-emphasis">Last login</div>
-                      <strong>1 hour ago</strong>
-                    </CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableDataCell className="text-center">
-                      <CAvatar size="md" src={avatar4} status="secondary" />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div>Enéas Kwadwo</div>
-                      <div className="small text-medium-emphasis">
-                        <span>New</span> | Registered: Jan 1, 2015
-                      </div>
-                    </CTableDataCell>
-                    <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon={cifFr} title="fr" id="fr" />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div className="clearfix">
-                        <div className="float-start">
-                          <strong>98%</strong>
-                        </div>
-                        <div className="float-end">
-                          <small className="text-medium-emphasis">
-                            Jun 11, 2015 - Jul 10, 2015
-                          </small>
-                        </div>
-                      </div>
-                      <CProgress thin color="danger" value={98} />
-                    </CTableDataCell>
-                    <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon={cibCcPaypal} />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div className="small text-medium-emphasis">Last login</div>
-                      <strong>Last month</strong>
-                    </CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableDataCell className="text-center">
-                      <CAvatar size="md" src={avatar5} status="success" />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div>Agapetus Tadeáš</div>
-                      <div className="small text-medium-emphasis">
-                        <span>New</span> | Registered: Jan 1, 2015
-                      </div>
-                    </CTableDataCell>
-                    <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon={cifEs} title="es" id="es" />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div className="clearfix">
-                        <div className="float-start">
-                          <strong>22%</strong>
-                        </div>
-                        <div className="float-end">
-                          <small className="text-medium-emphasis">
-                            Jun 11, 2015 - Jul 10, 2015
-                          </small>
-                        </div>
-                      </div>
-                      <CProgress thin color="info" value={22} />
-                    </CTableDataCell>
-                    <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon={cibCcApplePay} />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div className="small text-medium-emphasis">Last login</div>
-                      <strong>Last week</strong>
-                    </CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableDataCell className="text-center">
-                      <CAvatar size="md" src={avatar6} status="danger" />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div>Friderik Dávid</div>
-                      <div className="small text-medium-emphasis">
-                        <span>New</span> | Registered: Jan 1, 2015
-                      </div>
-                    </CTableDataCell>
-                    <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon={cifPl} title="pl" id="pl" />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div className="clearfix">
-                        <div className="float-start">
-                          <strong>43%</strong>
-                        </div>
-                        <div className="float-end">
-                          <small className="text-medium-emphasis">
-                            Jun 11, 2015 - Jul 10, 2015
-                          </small>
-                        </div>
-                      </div>
-                      <CProgress thin color="success" value={43} />
-                    </CTableDataCell>
-                    <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon={cibCcAmex} />
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      <div className="small text-medium-emphasis">Last login</div>
-                      <strong>Yesterday</strong>
-                    </CTableDataCell>
-                  </CTableRow>
+                        <CProgress thin color={item.usage.color} value={item.usage.value} />
+                      </CTableDataCell>
+                      <CTableDataCell className="text-center">
+                        <CIcon size="xl" icon={item.payment.icon} />
+                      </CTableDataCell>
+                      <CTableDataCell>
+                        <div className="small text-medium-emphasis">Last login</div>
+                        <strong>{item.activity}</strong>
+                      </CTableDataCell>
+                    </CTableRow>
+                  ))}
                 </CTableBody>
               </CTable>
             </CCardBody>