diff --git a/src/App.jsx b/src/App.jsx index e353e0d..b9896ab 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,20 +7,11 @@ import { import './css/style.scss'; -import './charts/ChartjsConfig'; - // Import pages -import Dashboard from './pages/Dashboard'; -import Analytics from './pages/Analytics'; -import Fintech from './pages/Fintech'; import ProfileId from './pages/digitalId/ProfileId'; import Validate from './pages/digitalId/Validate'; import ValidationLog from './pages/digitalId/ValidationLog'; import Verify from './pages/digitalId/Verify'; -import Messages from './pages/Messages'; -import ButtonPage from './pages/component/ButtonPage'; -import BadgePage from './pages/component/BadgePage'; -import AccordionPage from './pages/component/AccordionPage'; import Onboarding1 from "./pages/Onboarding1"; import Onboarding2 from "./pages/Onboarding2"; import Onboarding3 from "./pages/Onboarding3"; diff --git a/src/charts/BarChart01.jsx b/src/charts/BarChart01.jsx deleted file mode 100644 index a1a5cda..0000000 --- a/src/charts/BarChart01.jsx +++ /dev/null @@ -1,162 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig, formatValue } from '../utils/Utils'; - -Chart.register(BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend); - -function BarChart01({ - data, - width, - height -}) { - - const canvas = useRef(null); - const legend = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'bar', - data: data, - options: { - layout: { - padding: { - top: 12, - bottom: 16, - left: 20, - right: 20, - }, - }, - scales: { - y: { - grid: { - drawBorder: false, - }, - ticks: { - maxTicksLimit: 5, - callback: (value) => formatValue(value), - }, - }, - x: { - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - displayFormats: { - month: 'MMM YY', - }, - }, - grid: { - display: false, - drawBorder: false, - }, - }, - }, - plugins: { - legend: { - display: false, - }, - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatValue(context.parsed.y), - }, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - animation: { - duration: 500, - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - plugins: [{ - id: 'htmlLegend', - afterUpdate(c, args, options) { - const ul = legend.current; - if (!ul) return; - // Remove old legend items - while (ul.firstChild) { - ul.firstChild.remove(); - } - // Reuse the built-in legendItems generator - const items = c.options.plugins.legend.labels.generateLabels(c); - items.forEach((item) => { - const li = document.createElement('li'); - li.style.marginRight = tailwindConfig().theme.margin[4]; - // Button element - const button = document.createElement('button'); - button.style.display = 'inline-flex'; - button.style.alignItems = 'center'; - button.style.opacity = item.hidden ? '.3' : ''; - button.onclick = () => { - c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex)); - c.update(); - }; - // Color box - const box = document.createElement('span'); - box.style.display = 'block'; - box.style.width = tailwindConfig().theme.width[3]; - box.style.height = tailwindConfig().theme.height[3]; - box.style.borderRadius = tailwindConfig().theme.borderRadius.full; - box.style.marginRight = tailwindConfig().theme.margin[2]; - box.style.borderWidth = '3px'; - box.style.borderColor = item.fillStyle; - box.style.pointerEvents = 'none'; - // Label - const labelContainer = document.createElement('span'); - labelContainer.style.display = 'flex'; - labelContainer.style.alignItems = 'center'; - const value = document.createElement('span'); - value.style.color = tailwindConfig().theme.colors.slate[800]; - value.style.fontSize = tailwindConfig().theme.fontSize['3xl'][0]; - value.style.lineHeight = tailwindConfig().theme.fontSize['3xl'][1].lineHeight; - value.style.fontWeight = tailwindConfig().theme.fontWeight.bold; - value.style.marginRight = tailwindConfig().theme.margin[2]; - value.style.pointerEvents = 'none'; - const label = document.createElement('span'); - label.style.color = tailwindConfig().theme.colors.slate[500]; - label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]; - label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight; - const theValue = c.data.datasets[item.datasetIndex].data.reduce((a, b) => a + b, 0); - const valueText = document.createTextNode(formatValue(theValue)); - const labelText = document.createTextNode(item.text); - value.appendChild(valueText); - label.appendChild(labelText); - li.appendChild(button); - button.appendChild(box); - button.appendChild(labelContainer); - labelContainer.appendChild(value); - labelContainer.appendChild(label); - ul.appendChild(li); - }); - }, - }], - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - -
- -
-
- -
- - ); -} - -export default BarChart01; diff --git a/src/charts/BarChart02.jsx b/src/charts/BarChart02.jsx deleted file mode 100644 index 3f9d8fc..0000000 --- a/src/charts/BarChart02.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { formatValue } from '../utils/Utils'; - -Chart.register(BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend); - -function BarChart02({ - data, - width, - height -}) { - - const canvas = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'bar', - data: data, - options: { - layout: { - padding: { - top: 12, - bottom: 16, - left: 20, - right: 20, - }, - }, - scales: { - y: { - stacked: true, - grid: { - drawBorder: false, - }, - beginAtZero: true, - ticks: { - maxTicksLimit: 5, - callback: (value) => formatValue(value), - }, - }, - x: { - stacked: true, - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - displayFormats: { - month: 'MMM YY', - }, - }, - grid: { - display: false, - drawBorder: false, - }, - ticks: { - autoSkipPadding: 48, - maxRotation: 0, - }, - }, - }, - plugins: { - legend: { - display: false, - }, - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatValue(context.parsed.y), - }, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - animation: { - duration: 200, - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - - ); -} - -export default BarChart02; \ No newline at end of file diff --git a/src/charts/BarChart03.jsx b/src/charts/BarChart03.jsx deleted file mode 100644 index 9e8165f..0000000 --- a/src/charts/BarChart03.jsx +++ /dev/null @@ -1,156 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig, formatThousands } from '../utils/Utils'; - -Chart.register(BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend); - -function BarChart03({ - data, - width, - height -}) { - - const canvas = useRef(null); - const legend = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'bar', - data: data, - options: { - layout: { - padding: { - top: 12, - bottom: 16, - left: 20, - right: 20, - }, - }, - scales: { - y: { - stacked: true, - grid: { - drawBorder: false, - }, - beginAtZero: true, - ticks: { - maxTicksLimit: 5, - callback: (value) => formatThousands(value), - }, - }, - x: { - stacked: true, - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - displayFormats: { - month: 'MMM', - }, - }, - grid: { - display: false, - drawBorder: false, - }, - ticks: { - autoSkipPadding: 48, - maxRotation: 0, - }, - }, - }, - plugins: { - legend: { - display: false, - }, - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatThousands(context.parsed.y), - }, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - animation: { - duration: 500, - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - plugins: [{ - id: 'htmlLegend', - afterUpdate(c, args, options) { - const ul = legend.current - if (!ul) return - // Remove old legend items - while (ul.firstChild) { - ul.firstChild.remove() - } - // Reuse the built-in legendItems generator - const items = c.options.plugins.legend.labels.generateLabels(c) - items.forEach((item) => { - const li = document.createElement('li') - li.style.marginRight = tailwindConfig().theme.margin[3]; - // Button element - const button = document.createElement('button') - button.style.display = 'inline-flex'; - button.style.alignItems = 'center'; - button.style.opacity = item.hidden ? '.3' : ''; - button.onclick = () => { - c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex)) - c.update() - }; - // Color box - const box = document.createElement('span') - box.style.display = 'block'; - box.style.width = tailwindConfig().theme.width[3]; - box.style.height = tailwindConfig().theme.height[3]; - box.style.borderRadius = tailwindConfig().theme.borderRadius.full; - box.style.marginRight = tailwindConfig().theme.margin[2]; - box.style.borderWidth = '3px'; - box.style.borderColor = item.fillStyle; - box.style.pointerEvents = 'none'; - // Label - const label = document.createElement('span') - label.style.color = tailwindConfig().theme.colors.slate[500]; - label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]; - label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight; - const labelText = document.createTextNode(item.text) - label.appendChild(labelText) - li.appendChild(button) - button.appendChild(box) - button.appendChild(label) - ul.appendChild(li) - }) - }, - }], - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - -
-
-
    -
    -
    -
    - -
    -     - ); -} - -export default BarChart03; diff --git a/src/charts/BarChart04.jsx b/src/charts/BarChart04.jsx deleted file mode 100644 index 1b27d5e..0000000 --- a/src/charts/BarChart04.jsx +++ /dev/null @@ -1,149 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig, formatThousands } from '../utils/Utils'; - -Chart.register(BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend); - -function BarChart04({ - data, - width, - height -}) { - - const canvas = useRef(null); - const legend = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'bar', - data: data, - options: { - indexAxis: 'y', - layout: { - padding: { - top: 12, - bottom: 16, - left: 20, - right: 20, - }, - }, - scales: { - y: { - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - displayFormats: { - month: 'MMM', - }, - }, - grid: { - display: false, - drawBorder: false, - }, - }, - x: { - grid: { - drawBorder: false, - }, - ticks: { - maxTicksLimit: 3, - align: 'end', - callback: (value) => formatThousands(value), - }, - }, - }, - plugins: { - legend: { - display: false, - }, - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatThousands(context.parsed.x), - }, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - animation: { - duration: 500, - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - plugins: [{ - id: 'htmlLegend', - afterUpdate(c, args, options) { - const ul = legend.current - if (!ul) return - // Remove old legend items - while (ul.firstChild) { - ul.firstChild.remove() - } - // Reuse the built-in legendItems generator - const items = c.options.plugins.legend.labels.generateLabels(c) - items.forEach((item) => { - const li = document.createElement('li') - li.style.marginRight = tailwindConfig().theme.margin[4] - // Button element - const button = document.createElement('button') - button.style.display = 'inline-flex' - button.style.alignItems = 'center' - button.style.opacity = item.hidden ? '.3' : '' - button.onclick = () => { - c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex)) - c.update() - } - // Color box - const box = document.createElement('span') - box.style.display = 'block' - box.style.width = tailwindConfig().theme.width[3] - box.style.height = tailwindConfig().theme.height[3] - box.style.borderRadius = tailwindConfig().theme.borderRadius.full - box.style.marginRight = tailwindConfig().theme.margin[2] - box.style.borderWidth = '3px' - box.style.borderColor = item.fillStyle - box.style.pointerEvents = 'none' - // Label - const label = document.createElement('span') - label.style.color = tailwindConfig().theme.colors.slate[500] - label.style.fontSize = tailwindConfig().theme.fontSize.sm[0] - label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight - const labelText = document.createTextNode(item.text) - label.appendChild(labelText) - li.appendChild(button) - button.appendChild(box) - button.appendChild(label) - ul.appendChild(li) - }) - }, - }], - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - -
    - -
    -
    - -
    -     - ); -} - -export default BarChart04; diff --git a/src/charts/BarChart05.jsx b/src/charts/BarChart05.jsx deleted file mode 100644 index 1967794..0000000 --- a/src/charts/BarChart05.jsx +++ /dev/null @@ -1,157 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig, formatValue } from '../utils/Utils'; - -Chart.register(BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend); - -function BarChart05({ - data, - width, - height -}) { - - const canvas = useRef(null); - const legend = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'bar', - data: data, - options: { - layout: { - padding: { - top: 12, - bottom: 16, - left: 20, - right: 20, - }, - }, - scales: { - y: { - grid: { - drawBorder: false, - }, - ticks: { - maxTicksLimit: 5, - callback: (value) => formatValue(value), - }, - }, - x: { - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - displayFormats: { - month: 'MMM YY', - }, - }, - grid: { - display: false, - drawBorder: false, - }, - }, - }, - plugins: { - legend: { - display: false, - }, - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatValue(context.parsed.y), - }, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - animation: { - duration: 500, - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - plugins: [ - { - id: 'htmlLegend', - afterUpdate(c, args, options) { - const ul = legend.current; - if (!ul) return; - // Remove old legend items - while (ul.firstChild) { - ul.firstChild.remove(); - } - // Reuse the built-in legendItems generator - const items = c.options.plugins.legend.labels.generateLabels(c); - items.forEach((item) => { - const li = document.createElement('li'); - li.style.marginRight = tailwindConfig().theme.margin[4]; - // Button element - const button = document.createElement('button'); - button.style.display = 'inline-flex'; - button.style.alignItems = 'center'; - button.style.opacity = item.hidden ? '.3' : ''; - button.onclick = () => { - c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex)); - c.update(); - }; - // Color box - const box = document.createElement('span'); - box.style.display = 'block'; - box.style.width = tailwindConfig().theme.width[3]; - box.style.height = tailwindConfig().theme.height[3]; - box.style.borderRadius = tailwindConfig().theme.borderRadius.full; - box.style.marginRight = tailwindConfig().theme.margin[2]; - box.style.borderWidth = '3px'; - box.style.borderColor = item.fillStyle; - box.style.pointerEvents = 'none'; - // Label - const label = document.createElement('span'); - label.style.color = tailwindConfig().theme.colors.slate[500]; - label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]; - label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight; - const labelText = document.createTextNode(item.text); - label.appendChild(labelText); - li.appendChild(button); - button.appendChild(box); - button.appendChild(label); - ul.appendChild(li); - }); - }, - }, - ], - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - -
    -
    -
    -
    $1,347.09
    -
    Net
    -
    -
    -
      -
      -
      -
      -
      - -
      -       - ); -} - -export default BarChart05; diff --git a/src/charts/BarChart06.jsx b/src/charts/BarChart06.jsx deleted file mode 100644 index 88c6c32..0000000 --- a/src/charts/BarChart06.jsx +++ /dev/null @@ -1,164 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, BarController, BarElement, LinearScale, CategoryScale, Tooltip, Legend, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig, formatValue } from '../utils/Utils'; - -// Import images -import revolutIcon from '../images/company-icon-01.svg'; -import hsbcIcon from '../images/company-icon-02.svg'; -import qontoIcon from '../images/company-icon-03.svg'; -import n26Icon from '../images/company-icon-04.svg'; - -Chart.register(BarController, BarElement, LinearScale, CategoryScale, Tooltip, Legend); -const images = [revolutIcon, hsbcIcon, qontoIcon, n26Icon]; - -function BarChart06({ - data, - width, - height -}) { - - const canvas = useRef(null); - const legend = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'bar', - data: data, - options: { - indexAxis: 'y', - layout: { - padding: { - top: 12, - bottom: 16, - left: 72, - right: 20, - }, - }, - scales: { - y: { - grid: { - display: false, - drawBorder: false, - drawTicks: false, - }, - ticks: { - display: false, - }, - }, - x: { - grid: { - drawBorder: false, - }, - ticks: { - maxTicksLimit: 3, - align: 'end', - callback: (value) => formatValue(value), - }, - }, - }, - plugins: { - legend: { - display: false, - }, - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatValue(context.parsed.x), - }, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - animation: { - duration: 500, - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - plugins: [ - { - id: 'htmlLegend', - afterUpdate(c, args, options) { - const ul = legend.current; - if (!ul) return; - // Remove old legend items - while (ul.firstChild) { - ul.firstChild.remove(); - } - // Reuse the built-in legendItems generator - const items = c.options.plugins.legend.labels.generateLabels(c); - items.forEach((item) => { - const li = document.createElement('li'); - li.style.marginRight = tailwindConfig().theme.margin[4]; - // Button element - const button = document.createElement('button'); - button.style.display = 'inline-flex'; - button.style.alignItems = 'center'; - button.style.opacity = item.hidden ? '.3' : ''; - button.onclick = () => { - c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex)); - c.update(); - }; - // Color box - const box = document.createElement('span'); - box.style.display = 'block'; - box.style.width = tailwindConfig().theme.width[3]; - box.style.height = tailwindConfig().theme.height[3]; - box.style.borderRadius = tailwindConfig().theme.borderRadius.full; - box.style.marginRight = tailwindConfig().theme.margin[2]; - box.style.borderWidth = '3px'; - box.style.borderColor = item.fillStyle; - box.style.pointerEvents = 'none'; - // Label - const label = document.createElement('span'); - label.style.color = tailwindConfig().theme.colors.slate[500]; - label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]; - label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight; - const labelText = document.createTextNode(item.text); - label.appendChild(labelText); - li.appendChild(button); - button.appendChild(box); - button.appendChild(label); - ul.appendChild(li); - }); - }, - afterDraw(c) { - const xAxis = c.scales.x; - const yAxis = c.scales.y; - yAxis.ticks.forEach((value, index) => { - const y = yAxis.getPixelForTick(index); - const image = new Image(); - image.src = images[index]; - c.ctx.drawImage(image, xAxis.left - 52, y - 18); - }); - }, - }, - ], - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - -
      - -
      -
      - -
      -       - ); -} - -export default BarChart06; diff --git a/src/charts/ChartjsConfig.jsx b/src/charts/ChartjsConfig.jsx deleted file mode 100644 index acd2d7f..0000000 --- a/src/charts/ChartjsConfig.jsx +++ /dev/null @@ -1,42 +0,0 @@ -// Import Chart.js -import { Chart, Tooltip } from 'chart.js'; -// Import Tailwind config -import { tailwindConfig } from '../utils/Utils'; - -Chart.register(Tooltip); - -// Define Chart.js default settings -Chart.defaults.font.family = '"Inter", sans-serif'; -Chart.defaults.font.weight = '500'; -Chart.defaults.color = tailwindConfig().theme.colors.slate[400]; -Chart.defaults.scale.grid.color = tailwindConfig().theme.colors.slate[100]; -Chart.defaults.plugins.tooltip.titleColor = tailwindConfig().theme.colors.slate[800]; -Chart.defaults.plugins.tooltip.bodyColor = tailwindConfig().theme.colors.slate[800]; -Chart.defaults.plugins.tooltip.backgroundColor = tailwindConfig().theme.colors.white; -Chart.defaults.plugins.tooltip.borderWidth = 1; -Chart.defaults.plugins.tooltip.borderColor = tailwindConfig().theme.colors.slate[200]; -Chart.defaults.plugins.tooltip.displayColors = false; -Chart.defaults.plugins.tooltip.mode = 'nearest'; -Chart.defaults.plugins.tooltip.intersect = false; -Chart.defaults.plugins.tooltip.position = 'nearest'; -Chart.defaults.plugins.tooltip.caretSize = 0; -Chart.defaults.plugins.tooltip.caretPadding = 20; -Chart.defaults.plugins.tooltip.cornerRadius = 4; -Chart.defaults.plugins.tooltip.padding = 8; - -// Register Chart.js plugin to add a bg option for chart area -Chart.register({ - id: 'chartAreaPlugin', - // eslint-disable-next-line object-shorthand - beforeDraw: (chart) => { - if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) { - const ctx = chart.canvas.getContext('2d'); - const { chartArea } = chart; - ctx.save(); - ctx.fillStyle = chart.config.options.chartArea.backgroundColor; - // eslint-disable-next-line max-len - ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); - ctx.restore(); - } - }, -}); \ No newline at end of file diff --git a/src/charts/DoughnutChart.jsx b/src/charts/DoughnutChart.jsx deleted file mode 100644 index 5e41e44..0000000 --- a/src/charts/DoughnutChart.jsx +++ /dev/null @@ -1,114 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, DoughnutController, ArcElement, TimeScale, Tooltip, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig } from '../utils/Utils'; - -Chart.register(DoughnutController, ArcElement, TimeScale, Tooltip); - -function DoughnutChart({ - data, - width, - height -}) { - - const canvas = useRef(null); - const legend = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'doughnut', - data: data, - options: { - cutout: '80%', - layout: { - padding: 24, - }, - plugins: { - legend: { - display: false, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - animation: { - duration: 500, - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - plugins: [{ - id: 'htmlLegend', - afterUpdate(c, args, options) { - const ul = legend.current; - if (!ul) return; - // Remove old legend items - while (ul.firstChild) { - ul.firstChild.remove(); - } - // Reuse the built-in legendItems generator - const items = c.options.plugins.legend.labels.generateLabels(c); - items.forEach((item) => { - const li = document.createElement('li'); - li.style.margin = tailwindConfig().theme.margin[1]; - // Button element - const button = document.createElement('button'); - button.classList.add('btn-xs'); - button.style.backgroundColor = tailwindConfig().theme.colors.white; - button.style.borderWidth = tailwindConfig().theme.borderWidth[1]; - button.style.borderColor = tailwindConfig().theme.colors.slate[200]; - button.style.color = tailwindConfig().theme.colors.slate[500]; - button.style.boxShadow = tailwindConfig().theme.boxShadow.md; - button.style.opacity = item.hidden ? '.3' : ''; - button.onclick = () => { - c.toggleDataVisibility(item.index, !item.index); - c.update(); - }; - // Color box - const box = document.createElement('span'); - box.style.display = 'block'; - box.style.width = tailwindConfig().theme.width[2]; - box.style.height = tailwindConfig().theme.height[2]; - box.style.backgroundColor = item.fillStyle; - box.style.borderRadius = tailwindConfig().theme.borderRadius.sm; - box.style.marginRight = tailwindConfig().theme.margin[1]; - box.style.pointerEvents = 'none'; - // Label - const label = document.createElement('span'); - label.style.display = 'flex'; - label.style.alignItems = 'center'; - const labelText = document.createTextNode(item.text); - label.appendChild(labelText); - li.appendChild(button); - button.appendChild(box); - button.appendChild(label); - ul.appendChild(li); - }); - }, - }], - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( -
      -
      - -
      -
      - -
      -
      - ); -} - -export default DoughnutChart; \ No newline at end of file diff --git a/src/charts/LineChart01.jsx b/src/charts/LineChart01.jsx deleted file mode 100644 index 58dd01d..0000000 --- a/src/charts/LineChart01.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig, formatValue } from '../utils/Utils'; - -Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip); - -function LineChart01({ - data, - width, - height -}) { - - const canvas = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'line', - data: data, - options: { - chartArea: { - backgroundColor: tailwindConfig().theme.colors.slate[50], - }, - layout: { - padding: 20, - }, - scales: { - y: { - display: false, - beginAtZero: true, - }, - x: { - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - }, - display: false, - }, - }, - plugins: { - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatValue(context.parsed.y), - }, - }, - legend: { - display: false, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - - ); -} - -export default LineChart01; \ No newline at end of file diff --git a/src/charts/LineChart02.jsx b/src/charts/LineChart02.jsx deleted file mode 100644 index 371d15b..0000000 --- a/src/charts/LineChart02.jsx +++ /dev/null @@ -1,153 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig, formatValue } from '../utils/Utils'; - -Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip); - -function LineChart02({ - data, - width, - height -}) { - - const canvas = useRef(null); - const legend = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'line', - data: data, - options: { - layout: { - padding: 20, - }, - scales: { - y: { - grid: { - drawBorder: false, - beginAtZero: true, - }, - ticks: { - maxTicksLimit: 5, - callback: (value) => formatValue(value), - }, - }, - x: { - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - displayFormats: { - month: 'MMM YY', - }, - }, - grid: { - display: false, - drawBorder: false, - }, - ticks: { - autoSkipPadding: 48, - maxRotation: 0, - }, - }, - }, - plugins: { - legend: { - display: false, - }, - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatValue(context.parsed.y), - }, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - plugins: [{ - id: 'htmlLegend', - afterUpdate(c, args, options) { - const ul = legend.current; - if (!ul) return; - // Remove old legend items - while (ul.firstChild) { - ul.firstChild.remove(); - } - // Reuse the built-in legendItems generator - const items = c.options.plugins.legend.labels.generateLabels(c); - items.slice(0, 2).forEach((item) => { - const li = document.createElement('li'); - li.style.marginLeft = tailwindConfig().theme.margin[3]; - // Button element - const button = document.createElement('button'); - button.style.display = 'inline-flex'; - button.style.alignItems = 'center'; - button.style.opacity = item.hidden ? '.3' : ''; - button.onclick = () => { - c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex)); - c.update(); - }; - // Color box - const box = document.createElement('span'); - box.style.display = 'block'; - box.style.width = tailwindConfig().theme.width[3]; - box.style.height = tailwindConfig().theme.height[3]; - box.style.borderRadius = tailwindConfig().theme.borderRadius.full; - box.style.marginRight = tailwindConfig().theme.margin[2]; - box.style.borderWidth = '3px'; - box.style.borderColor = c.data.datasets[item.datasetIndex].borderColor; - box.style.pointerEvents = 'none'; - // Label - const label = document.createElement('span'); - label.style.color = tailwindConfig().theme.colors.slate[500]; - label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]; - label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight; - const labelText = document.createTextNode(item.text); - label.appendChild(labelText); - li.appendChild(button); - button.appendChild(box); - button.appendChild(label); - ul.appendChild(li); - }); - }, - }], - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - -
      -
      -
      -
      $1,482
      -
      -22%
      -
      -
      -
        -
        -
        -
        - {/* Chart built with Chart.js 3 */} -
        - -
        -         - ); -} - -export default LineChart02; \ No newline at end of file diff --git a/src/charts/LineChart03.jsx b/src/charts/LineChart03.jsx deleted file mode 100644 index 9a4a8c8..0000000 --- a/src/charts/LineChart03.jsx +++ /dev/null @@ -1,88 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { formatThousands } from '../utils/Utils'; - -Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip); - -function LineChart03({ - data, - width, - height -}) { - - const canvas = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'line', - data: data, - options: { - layout: { - padding: 20, - }, - scales: { - y: { - beginAtZero: true, - grid: { - drawBorder: false, - }, - ticks: { - callback: (value) => formatThousands(value), - }, - }, - x: { - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - displayFormats: { - month: 'MMM YY', - }, - }, - grid: { - display: false, - drawBorder: false, - }, - ticks: { - autoSkipPadding: 48, - maxRotation: 0, - }, - }, - }, - plugins: { - legend: { - display: false, - }, - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatThousands(context.parsed.y), - }, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - - ); -} - -export default LineChart03; \ No newline at end of file diff --git a/src/charts/LineChart04.jsx b/src/charts/LineChart04.jsx deleted file mode 100644 index ef8d843..0000000 --- a/src/charts/LineChart04.jsx +++ /dev/null @@ -1,78 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig, formatThousands } from '../utils/Utils'; - -Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip); - -function LineChart04({ - data, - width, - height -}) { - - const canvas = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'line', - data: data, - options: { - chartArea: { - backgroundColor: tailwindConfig().theme.colors.slate[50], - }, - layout: { - padding: { - left: 20, - right: 20, - }, - }, - scales: { - y: { - display: false, - beginAtZero: true, - }, - x: { - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - }, - display: false, - }, - }, - plugins: { - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatThousands(context.parsed.y), - }, - }, - legend: { - display: false, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - maintainAspectRatio: false, - }, - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - - ); -} - -export default LineChart04; \ No newline at end of file diff --git a/src/charts/LineChart05.jsx b/src/charts/LineChart05.jsx deleted file mode 100644 index dcd7d5e..0000000 --- a/src/charts/LineChart05.jsx +++ /dev/null @@ -1,157 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig } from '../utils/Utils'; - -Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip); - -function LineChart05({ - data, - width, - height -}) { - - const canvas = useRef(null); - const legend = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'line', - data: data, - options: { - layout: { - padding: 20, - }, - scales: { - y: { - beginAtZero: true, - grid: { - drawBorder: false, - }, - ticks: { - maxTicksLimit: 7, - callback: (value) => `${value}%`, - }, - }, - x: { - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - displayFormats: { - month: 'MMM YY', - }, - }, - grid: { - display: false, - drawBorder: false, - }, - ticks: { - autoSkipPadding: 48, - maxRotation: 0, - }, - }, - }, - plugins: { - legend: { - display: false, - }, - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => `${context.parsed.y}%`, - }, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - plugins: [ - { - id: 'htmlLegend', - afterUpdate(c, args, options) { - const ul = legend.current; - if (!ul) return; - // Remove old legend items - while (ul.firstChild) { - ul.firstChild.remove(); - } - // Reuse the built-in legendItems generator - const items = c.options.plugins.legend.labels.generateLabels(c); - items.forEach((item) => { - const li = document.createElement('li'); - li.style.marginLeft = tailwindConfig().theme.margin[3]; - // Button element - const button = document.createElement('button'); - button.style.display = 'inline-flex'; - button.style.alignItems = 'center'; - button.style.opacity = item.hidden ? '.3' : ''; - button.onclick = () => { - c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex)); - c.update(); - }; - // Color box - const box = document.createElement('span'); - box.style.display = 'block'; - box.style.width = tailwindConfig().theme.width[3]; - box.style.height = tailwindConfig().theme.height[3]; - box.style.borderRadius = tailwindConfig().theme.borderRadius.full; - box.style.marginRight = tailwindConfig().theme.margin[2]; - box.style.borderWidth = '3px'; - box.style.borderColor = c.data.datasets[item.datasetIndex].borderColor; - box.style.pointerEvents = 'none'; - // Label - const label = document.createElement('span'); - label.style.color = tailwindConfig().theme.colors.slate[500]; - label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]; - label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight; - const labelText = document.createTextNode(item.text); - label.appendChild(labelText); - li.appendChild(button); - button.appendChild(box); - button.appendChild(label); - ul.appendChild(li); - }); - }, - }, - ], - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - -
        -
        -
        -
        244.7%
        -
        - 17.4% AVG -
        -
        -
        -
          -
        -
        -
        - {/* Chart built with Chart.js 3 */} -
        - -
        -         - ); -} - -export default LineChart05; \ No newline at end of file diff --git a/src/charts/LineChart06.jsx b/src/charts/LineChart06.jsx deleted file mode 100644 index a474fea..0000000 --- a/src/charts/LineChart06.jsx +++ /dev/null @@ -1,94 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { formatValue } from '../utils/Utils'; - -Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip); - -function LineChart06({ - data, - width, - height -}) { - - const canvas = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'line', - data: data, - options: { - layout: { - padding: { - top: 12, - bottom: 16, - left: 20, - right: 20, - }, - }, - scales: { - y: { - beginAtZero: true, - grid: { - drawBorder: false, - }, - ticks: { - maxTicksLimit: 7, - callback: (value) => formatValue(value), - }, - }, - x: { - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - displayFormats: { - month: 'MMM YY', - }, - }, - grid: { - display: false, - drawBorder: false, - }, - ticks: { - autoSkipPadding: 48, - maxRotation: 0, - }, - }, - }, - plugins: { - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatValue(context.parsed.y), - }, - }, - legend: { - display: false, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - - ); -} - -export default LineChart06; \ No newline at end of file diff --git a/src/charts/LineChart07.jsx b/src/charts/LineChart07.jsx deleted file mode 100644 index babdd05..0000000 --- a/src/charts/LineChart07.jsx +++ /dev/null @@ -1,86 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, LineController, LineElement, Filler, PointElement, LinearScale, CategoryScale, Tooltip, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { formatValue } from '../utils/Utils'; - -Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, CategoryScale, Tooltip); - -function LineChart07({ - data, - width, - height -}) { - - const canvas = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'line', - data: data, - options: { - layout: { - padding: { - top: 12, - bottom: 16, - left: 20, - right: 20, - }, - }, - scales: { - y: { - beginAtZero: true, - grid: { - drawBorder: false, - }, - ticks: { - maxTicksLimit: 7, - callback: (value) => formatValue(value), - }, - }, - x: { - grid: { - display: false, - drawBorder: false, - }, - ticks: { - autoSkipPadding: 48, - maxRotation: 0, - align: 'end', - }, - }, - }, - plugins: { - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatValue(context.parsed.y), - }, - }, - legend: { - display: false, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - maintainAspectRatio: false, - }, - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - - ); -} - -export default LineChart07; \ No newline at end of file diff --git a/src/charts/LineChart08.jsx b/src/charts/LineChart08.jsx deleted file mode 100644 index 2680da5..0000000 --- a/src/charts/LineChart08.jsx +++ /dev/null @@ -1,84 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { formatValue } from '../utils/Utils'; - -Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip); - -function LineChart08({ - data, - width, - height -}) { - - const canvas = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'line', - data: data, - options: { - layout: { - padding: { - top: 16, - bottom: 16, - left: 20, - right: 20, - }, - }, - scales: { - y: { - beginAtZero: true, - grid: { - drawBorder: false, - drawTicks: false, - }, - ticks: { - maxTicksLimit: 2, - display: false, - }, - }, - x: { - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - }, - display: false, - }, - }, - plugins: { - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatValue(context.parsed.y), - }, - }, - legend: { - display: false, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - maintainAspectRatio: false, - }, - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - - ); -} - -export default LineChart08; \ No newline at end of file diff --git a/src/charts/LineChart09.jsx b/src/charts/LineChart09.jsx deleted file mode 100644 index 84ba92b..0000000 --- a/src/charts/LineChart09.jsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { formatValue } from '../utils/Utils'; - -Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip); - -function LineChart09({ - data, - width, - height -}) { - - const canvas = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'line', - data: data, - options: { - scales: { - y: { - display: false, - beginAtZero: true, - }, - x: { - type: 'time', - time: { - parser: 'MM-DD-YYYY', - unit: 'month', - }, - display: false, - }, - }, - plugins: { - tooltip: { - callbacks: { - title: () => false, // Disable tooltip title - label: (context) => formatValue(context.parsed.y), - }, - }, - legend: { - display: false, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - maintainAspectRatio: false, - }, - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - - ); -} - -export default LineChart09; \ No newline at end of file diff --git a/src/charts/PieChart.jsx b/src/charts/PieChart.jsx deleted file mode 100644 index aee10f6..0000000 --- a/src/charts/PieChart.jsx +++ /dev/null @@ -1,117 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, PieController, ArcElement, TimeScale, Tooltip, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig } from '../utils/Utils'; - -Chart.register(PieController, ArcElement, TimeScale, Tooltip); - -function PieChart({ - data, - width, - height -}) { - - const canvas = useRef(null); - const legend = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'pie', - data: data, - options: { - layout: { - padding: { - top: 4, - bottom: 4, - left: 24, - right: 24, - }, - }, - plugins: { - legend: { - display: false, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - animation: { - duration: 200, - }, - maintainAspectRatio: false, - }, - plugins: [ - { - id: 'htmlLegend', - afterUpdate(c, args, options) { - const ul = legend.current; - if (!ul) return; - // Remove old legend items - while (ul.firstChild) { - ul.firstChild.remove(); - } - // Reuse the built-in legendItems generator - const items = c.options.plugins.legend.labels.generateLabels(c); - items.forEach((item) => { - const li = document.createElement('li'); - li.style.margin = tailwindConfig().theme.margin[1.5]; - // Button element - const button = document.createElement('button'); - button.style.display = 'inline-flex'; - button.style.alignItems = 'center'; - button.style.opacity = item.hidden ? '.3' : ''; - button.onclick = () => { - c.toggleDataVisibility(item.index, !item.index); - c.update(); - }; - // Color box - const box = document.createElement('span'); - box.style.display = 'block'; - box.style.width = tailwindConfig().theme.width[3]; - box.style.height = tailwindConfig().theme.height[3]; - box.style.borderRadius = tailwindConfig().theme.borderRadius.full; - box.style.marginRight = tailwindConfig().theme.margin[1.5]; - box.style.borderWidth = '3px'; - box.style.borderColor = item.fillStyle; - box.style.pointerEvents = 'none'; - // Label - const label = document.createElement('span'); - label.style.color = tailwindConfig().theme.colors.slate[500]; - label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]; - label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight; - const labelText = document.createTextNode(item.text); - label.appendChild(labelText); - li.appendChild(button); - button.appendChild(box); - button.appendChild(label); - ul.appendChild(li); - }); - }, - }, - ], - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( -
        -
        - -
        -
        -
        -
        - ); -} - -export default PieChart; \ No newline at end of file diff --git a/src/charts/PolarChart.jsx b/src/charts/PolarChart.jsx deleted file mode 100644 index 8b0a38c..0000000 --- a/src/charts/PolarChart.jsx +++ /dev/null @@ -1,113 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, PolarAreaController, RadialLinearScale, Tooltip, Legend, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig } from '../utils/Utils'; - -Chart.register(PolarAreaController, RadialLinearScale, Tooltip, Legend); - -function PolarChart({ - data, - width, - height -}) { - - const canvas = useRef(null); - const legend = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'polarArea', - data: data, - options: { - layout: { - padding: 24, - }, - plugins: { - legend: { - display: false, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - animation: { - duration: 500, - }, - maintainAspectRatio: false, - resizeDelay: 200, - }, - plugins: [{ - id: 'htmlLegend', - afterUpdate(c, args, options) { - const ul = legend.current - if (!ul) return - // Remove old legend items - while (ul.firstChild) { - ul.firstChild.remove() - } - // Reuse the built-in legendItems generator - const items = c.options.plugins.legend.labels.generateLabels(c) - items.forEach((item) => { - const li = document.createElement('li') - li.style.margin = tailwindConfig().theme.margin[1] - // Button element - const button = document.createElement('button') - button.classList.add('btn-xs') - button.style.backgroundColor = tailwindConfig().theme.colors.white - button.style.borderWidth = tailwindConfig().theme.borderWidth[1] - button.style.borderColor = tailwindConfig().theme.colors.slate[200] - button.style.color = tailwindConfig().theme.colors.slate[500] - button.style.boxShadow = tailwindConfig().theme.boxShadow.md - button.style.opacity = item.hidden ? '.3' : '' - button.onclick = () => { - c.toggleDataVisibility(item.index, !item.index) - c.update() - } - // Color box - const box = document.createElement('span') - box.style.display = 'block' - box.style.width = tailwindConfig().theme.width[2] - box.style.height = tailwindConfig().theme.height[2] - box.style.backgroundColor = item.fillStyle - box.style.borderRadius = tailwindConfig().theme.borderRadius.sm - box.style.marginRight = tailwindConfig().theme.margin[1] - box.style.pointerEvents = 'none' - // Label - const label = document.createElement('span') - label.style.display = 'flex' - label.style.alignItems = 'center' - const labelText = document.createTextNode(item.text) - label.appendChild(labelText) - li.appendChild(button) - button.appendChild(box) - button.appendChild(label) - ul.appendChild(li) - }) - }, - }], - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( -
        -
        - -
        -
        - -
        -
        - ); -} - -export default PolarChart; \ No newline at end of file diff --git a/src/charts/RealtimeChart.jsx b/src/charts/RealtimeChart.jsx deleted file mode 100644 index f9ae900..0000000 --- a/src/charts/RealtimeChart.jsx +++ /dev/null @@ -1,120 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import { - Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip, -} from 'chart.js'; -import 'chartjs-adapter-moment'; - -// Import utilities -import { tailwindConfig, formatValue } from '../utils/Utils'; - -Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip); - -function RealtimeChart({ - data, - width, - height -}) { - - const canvas = useRef(null); - const chartValue = useRef(null); - const chartDeviation = useRef(null); - - useEffect(() => { - const ctx = canvas.current; - // eslint-disable-next-line no-unused-vars - const chart = new Chart(ctx, { - type: 'line', - data: data, - options: { - layout: { - padding: 20, - }, - scales: { - y: { - grid: { - drawBorder: false, - }, - suggestedMin: 30, - suggestedMax: 80, - ticks: { - maxTicksLimit: 5, - callback: (value) => formatValue(value), - }, - }, - x: { - type: 'time', - time: { - parser: 'hh:mm:ss', - unit: 'second', - tooltipFormat: 'MMM DD, H:mm:ss a', - displayFormats: { - second: 'H:mm:ss', - }, - }, - grid: { - display: false, - drawBorder: false, - }, - ticks: { - autoSkipPadding: 48, - maxRotation: 0, - }, - }, - }, - plugins: { - legend: { - display: false, - }, - tooltip: { - titleFont: { - weight: '600', - }, - callbacks: { - label: (context) => formatValue(context.parsed.y), - }, - }, - }, - interaction: { - intersect: false, - mode: 'nearest', - }, - animation: false, - maintainAspectRatio: false, - resizeDelay: 200, - }, - }); - return () => chart.destroy(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [data]); - - // Update header values - useEffect(() => { - const currentValue = data.datasets[0].data[data.datasets[0].data.length - 1]; - const previousValue = data.datasets[0].data[data.datasets[0].data.length - 2]; - const diff = ((currentValue - previousValue) / previousValue) * 100; - chartValue.current.innerHTML = data.datasets[0].data[data.datasets[0].data.length - 1]; - if (diff < 0) { - chartDeviation.current.style.backgroundColor = tailwindConfig().theme.colors.yellow[500]; - } else { - chartDeviation.current.style.backgroundColor = tailwindConfig().theme.colors.emerald[500]; - } - chartDeviation.current.innerHTML = `${diff > 0 ? '+' : ''}${diff.toFixed(2)}%`; - }, [data]); - - return ( - -
        -
        -
        $57.81
        -
        -
        -
        -
        - -
        -         - ); -} - -export default RealtimeChart; \ No newline at end of file diff --git a/src/components/AccordionBasic.jsx b/src/components/AccordionBasic.jsx deleted file mode 100644 index 75c668e..0000000 --- a/src/components/AccordionBasic.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { useState } from 'react'; - -function AccordionBasic(props) { - - const [open, setOpen] = useState(false); - - return ( -
        - -
        - {props.children} -
        -
        - ); -} - -export default AccordionBasic; diff --git a/src/components/AccordionTableItem.jsx b/src/components/AccordionTableItem.jsx deleted file mode 100644 index 218ce2c..0000000 --- a/src/components/AccordionTableItem.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import React, { useState } from 'react'; - -function AccordionTableItem(props) { - - const [open, setOpen] = useState(false); - - return ( - - - -
        -
        - {props.customer} -
        -
        {props.customer}
        -
        - - -
        {props.total}
        - - -
        {props.status}
        - - -
        {props.items}
        - - -
        {props.location}
        - - -
        - - - -
        {props.type}
        -
        - - -
        - -
        - - - {/* - Example of content revealing when clicking the button on the right side: - Note that you must set a "colSpan" attribute on the element, - and it should match the number of columns in your table - */} - - -
        - - - -
        {props.description}
        -
        - - - - ); -} - -export default AccordionTableItem; diff --git a/src/components/AccordionTableRichItem.jsx b/src/components/AccordionTableRichItem.jsx deleted file mode 100644 index 682c251..0000000 --- a/src/components/AccordionTableRichItem.jsx +++ /dev/null @@ -1,66 +0,0 @@ -import React, { useState } from 'react'; - -function AccordionTableRichItem(props) { - - const [open, setOpen] = useState(false); - - return ( - - - -
        -
        - {props.customer} -
        -
        {props.customer}
        -
        - - -
        {props.email}
        - - -
        {props.location}
        - - -
        {props.date}
        - - -
        {props.amount}
        - - -
        - -
        - - - {/* - Example of content revealing when clicking the button on the right side: - Note that you must set a "colSpan" attribute on the element, - and it should match the number of columns in your table - */} - - -
        -
        -
        {props.descriptionTitle}
        -
        {props.descriptionBody}
        -
        - -
        - - - - ); -} - -export default AccordionTableRichItem; diff --git a/src/components/Datepicker.jsx b/src/components/Datepicker.jsx deleted file mode 100644 index ad0edc9..0000000 --- a/src/components/Datepicker.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import Flatpickr from 'react-flatpickr'; - -function Datepicker({ - align -}) { - - const options = { - mode: 'range', - static: true, - monthSelectorType: 'static', - dateFormat: 'M j, Y', - defaultDate: [new Date().setDate(new Date().getDate() - 6), new Date()], - prevArrow: '', - nextArrow: '', - onReady: (selectedDates, dateStr, instance) => { - instance.element.value = dateStr.replace('to', '-'); - const customClass = (align) ? align : ''; - instance.calendarContainer.classList.add(`flatpickr-${customClass}`); - }, - onChange: (selectedDates, dateStr, instance) => { - instance.element.value = dateStr.replace('to', '-'); - }, - } - - return ( -
        - -
        - - - -
        -
        - ); -} - -export default Datepicker; diff --git a/src/components/DropdownEditMenu.jsx b/src/components/DropdownEditMenu.jsx deleted file mode 100644 index ece1413..0000000 --- a/src/components/DropdownEditMenu.jsx +++ /dev/null @@ -1,75 +0,0 @@ -import React, { useState, useRef, useEffect } from 'react'; -import Transition from '../utils/Transition'; - -function DropdownEditMenu({ - children, - align, - ...rest -}) { - - const [dropdownOpen, setDropdownOpen] = useState(false); - - const trigger = useRef(null); - const dropdown = useRef(null); - - // close on click outside - useEffect(() => { - const clickHandler = ({ target }) => { - if (!dropdown.current) return; - if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return; - setDropdownOpen(false); - }; - document.addEventListener('click', clickHandler); - return () => document.removeEventListener('click', clickHandler); - }); - - // close if the esc key is pressed - useEffect(() => { - const keyHandler = ({ keyCode }) => { - if (!dropdownOpen || keyCode !== 27) return; - setDropdownOpen(false); - }; - document.addEventListener('keydown', keyHandler); - return () => document.removeEventListener('keydown', keyHandler); - }); - - return ( -
        - - - - -
        - ); -} - -export default DropdownEditMenu; \ No newline at end of file diff --git a/src/components/DropdownFilter.jsx b/src/components/DropdownFilter.jsx deleted file mode 100644 index 11bb4bd..0000000 --- a/src/components/DropdownFilter.jsx +++ /dev/null @@ -1,115 +0,0 @@ -import React, { useState, useRef, useEffect } from 'react'; -import Transition from '../utils/Transition'; - -function DropdownFilter({ - align -}) { - - const [dropdownOpen, setDropdownOpen] = useState(false); - - const trigger = useRef(null); - const dropdown = useRef(null); - - // close on click outside - useEffect(() => { - const clickHandler = ({ target }) => { - if (!dropdown.current) return; - if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return; - setDropdownOpen(false); - }; - document.addEventListener('click', clickHandler); - return () => document.removeEventListener('click', clickHandler); - }); - - // close if the esc key is pressed - useEffect(() => { - const keyHandler = ({ keyCode }) => { - if (!dropdownOpen || keyCode !== 27) return; - setDropdownOpen(false); - }; - document.addEventListener('keydown', keyHandler); - return () => document.removeEventListener('keydown', keyHandler); - }); - - return ( -
        - - -
        -
        Filters
        -
          -
        • - -
          • -
        • - -
          • -
        • - -
          • -
        • - -
          • -
        • - -
          • -
        • - -
          • -
        -
        -
          -
        • - -
          • -
        • - -
          • -
        -
        -
        -         -
        - ); -} - -export default DropdownFilter; diff --git a/src/components/DropdownHelp.jsx b/src/components/DropdownHelp.jsx deleted file mode 100644 index 9c8cb78..0000000 --- a/src/components/DropdownHelp.jsx +++ /dev/null @@ -1,111 +0,0 @@ -import React, { useState, useRef, useEffect } from 'react'; -import { Link } from 'react-router-dom'; -import Transition from '../utils/Transition'; - -function DropdownHelp({ - align -}) { - - const [dropdownOpen, setDropdownOpen] = useState(false); - - const trigger = useRef(null); - const dropdown = useRef(null); - - // close on click outside - useEffect(() => { - const clickHandler = ({ target }) => { - if (!dropdown.current) return; - if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return; - setDropdownOpen(false); - }; - document.addEventListener('click', clickHandler); - return () => document.removeEventListener('click', clickHandler); - }); - - // close if the esc key is pressed - useEffect(() => { - const keyHandler = ({ keyCode }) => { - if (!dropdownOpen || keyCode !== 27) return; - setDropdownOpen(false); - }; - document.addEventListener('keydown', keyHandler); - return () => document.removeEventListener('keydown', keyHandler); - }); - - return ( -
        - - - -
        setDropdownOpen(true)} - onBlur={() => setDropdownOpen(false)} - > -
        Need help?
        -
          -
        • - setDropdownOpen(!dropdownOpen)} - > - - - - - Documentation - -
          • -
        • - setDropdownOpen(!dropdownOpen)} - > - - - - Support Site - -
          • -
        • - setDropdownOpen(!dropdownOpen)} - > - - - - Contact us - -
          • -
        -
        -         -
        - ) -} - -export default DropdownHelp; \ No newline at end of file diff --git a/src/components/DropdownNotifications.jsx b/src/components/DropdownNotifications.jsx deleted file mode 100644 index f97f580..0000000 --- a/src/components/DropdownNotifications.jsx +++ /dev/null @@ -1,106 +0,0 @@ -import React, { useState, useRef, useEffect } from 'react'; -import { Link } from 'react-router-dom'; -import Transition from '../utils/Transition'; - -function DropdownNotifications({ - align -}) { - - const [dropdownOpen, setDropdownOpen] = useState(false); - - const trigger = useRef(null); - const dropdown = useRef(null); - - // close on click outside - useEffect(() => { - const clickHandler = ({ target }) => { - if (!dropdown.current) return; - if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return; - setDropdownOpen(false); - }; - document.addEventListener('click', clickHandler); - return () => document.removeEventListener('click', clickHandler); - }); - - // close if the esc key is pressed - useEffect(() => { - const keyHandler = ({ keyCode }) => { - if (!dropdownOpen || keyCode !== 27) return; - setDropdownOpen(false); - }; - document.addEventListener('keydown', keyHandler); - return () => document.removeEventListener('keydown', keyHandler); - }); - - return ( -
        - - - -
        setDropdownOpen(true)} - onBlur={() => setDropdownOpen(false)} - > -
        Notifications
        -
          -
        • - setDropdownOpen(!dropdownOpen)} - > - ๐Ÿ“ฃ Edit your information in a swipe Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim. - Feb 12, 2021 - -
          • -
        • - setDropdownOpen(!dropdownOpen)} - > - ๐Ÿ“ฃ Edit your information in a swipe Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim. - Feb 9, 2021 - -
          • -
        • - setDropdownOpen(!dropdownOpen)} - > - ๐Ÿš€Say goodbye to paper receipts! Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim. - Jan 24, 2020 - -
          • -
        -
        -         -
        - ) -} - -export default DropdownNotifications; \ No newline at end of file diff --git a/src/components/DropdownProfile.jsx b/src/components/DropdownProfile.jsx index 0952f8a..da94fb9 100644 --- a/src/components/DropdownProfile.jsx +++ b/src/components/DropdownProfile.jsx @@ -75,18 +75,16 @@ import UserAvatar from '../images/user-avatar-32.png'; onBlur={() => setDropdownOpen(false)} >
        -
        Acme Inc.
        -
        Administrator
        +
        {store.accountName}
        {/* Table */} -
        +
        @@ -262,7 +269,7 @@ const Profile = observer (() => { handleInput(e.target.value, 'label')} @@ -277,6 +284,7 @@ const Profile = observer (() => { ))} + { alreadyExists &&
        This property already added!
        }
        @@ -308,7 +316,7 @@ const Profile = observer (() => { Store data on blockchain
        - setToggle(!toggle)} /> + setStoreOnBlockchain(!storeOnBlockchain)} /> @@ -321,7 +329,7 @@ const Profile = observer (() => { className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600" onClick={cancelAddPanel} > - Cansel + Cancel - - - - {/* Divider */} -
        diff --git a/src/partials/analytics/AnalyticsCard01.jsx b/src/partials/analytics/AnalyticsCard01.jsx deleted file mode 100644 index 95a1375..0000000 --- a/src/partials/analytics/AnalyticsCard01.jsx +++ /dev/null @@ -1,123 +0,0 @@ -import React from 'react'; -import LineChart from '../../charts/LineChart03'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function AnalyticsCard01() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - '06-01-2021', '07-01-2021', '08-01-2021', - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', - ], - datasets: [ - // Indigo line - { - label: 'Current', - data: [ - 5000, 8700, 7500, 12000, 11000, 9500, 10500, - 10000, 15000, 9000, 10000, 7000, 22000, 7200, - 9800, 9000, 10000, 8000, 15000, 12000, 11000, - 13000, 11000, 15000, 17000, 18000, - ], - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`, - borderColor: tailwindConfig().theme.colors.indigo[500], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], - clip: 20, - }, - // Gray line - { - label: 'Previous', - data: [ - 8000, 5000, 6500, 5000, 6500, 12000, 8000, - 9000, 8000, 8000, 12500, 10000, 10000, 12000, - 11000, 16000, 12000, 10000, 10000, 14000, 9000, - 10000, 15000, 12500, 14000, 11000, - ], - borderColor: tailwindConfig().theme.colors.slate[300], - fill: false, - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.slate[300], - clip: 20, - }, - ], - }; - - return ( -
        -
        -

        Analytics

        -
        -
        -
        - {/* Unique Visitors */} -
        -
        -
        -
        24.7K
        -
        +49%
        -
        -
        Unique Visitors
        -
        - -
        - {/* Total Pageviews */} -
        -
        -
        -
        56.9K
        -
        +7%
        -
        -
        Total Pageviews
        -
        - -
        - {/* Bounce Rate */} -
        -
        -
        -
        54%
        -
        -7%
        -
        -
        Bounce Rate
        -
        - -
        - {/* Visit Duration*/} -
        -
        -
        -
        2m 56s
        -
        +7%
        -
        -
        Visit Duration
        -
        -
        -
        -
        - {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -
        - ); -} - -export default AnalyticsCard01; diff --git a/src/partials/analytics/AnalyticsCard02.jsx b/src/partials/analytics/AnalyticsCard02.jsx deleted file mode 100644 index ab05157..0000000 --- a/src/partials/analytics/AnalyticsCard02.jsx +++ /dev/null @@ -1,139 +0,0 @@ -import React from 'react'; -import LineChart from '../../charts/LineChart04'; -import { Link } from 'react-router-dom'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function AnalyticsCard02() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - '06-01-2021', '07-01-2021', '08-01-2021', - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', - ], - datasets: [ - // Indigo line - { - data: [ - 732, 610, 610, 504, 504, 504, 349, - 349, 504, 342, 504, 610, 391, 192, - 154, 273, 191, 191, 126, 263, 349, - 252, 423, 622, 470, 532, - ], - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`, - borderColor: tailwindConfig().theme.colors.indigo[500], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], - clip: 20, - }, - ], - }; - - return ( -
        -
        -

        Active Users Right Now

        -
        - {/* Card content */} -
        - {/* Live visitors number */} -
        -
        - {/* Red dot */} - - {/* Vistors number */} -
        -
        347
        -
        Live visitors
        -
        -
        -
        - - {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        - - {/* Table */} -
        -
        - - {/* Table header */} - - - - - - - {/* Table body */} - - {/* Row */} - - - - - {/* Row */} - - - - - {/* Row */} - - - - - {/* Row */} - - - - - -
        -
        Top pages
        -         		-
        Active users
        -
        -
        preview.cruip.com/open-pro/
        -         		-
        94
        -
        -
        preview.cruip.com/simple/
        -         		-
        42
        -
        -
        cruip.com/unlimited/
        -         		-
        12
        -
        -
        preview.cruip.com/twist/
        -         		-
        4
        -
        -
        -
        - - {/* Card footer */} -
        - Real-Time Report -> -
        -
        -
        - ); -} - -export default AnalyticsCard02; diff --git a/src/partials/analytics/AnalyticsCard03.jsx b/src/partials/analytics/AnalyticsCard03.jsx deleted file mode 100644 index e388d06..0000000 --- a/src/partials/analytics/AnalyticsCard03.jsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import BarChart from '../../charts/BarChart03'; - -// Import utilities -import { tailwindConfig } from '../../utils/Utils'; - -function AnalyticsCard03() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - ], - datasets: [ - // Stack - { - label: 'Direct', - data: [ - 5000, 4000, 4000, 3800, 5200, 5100, - ], - backgroundColor: tailwindConfig().theme.colors.indigo[700], - hoverBackgroundColor: tailwindConfig().theme.colors.indigo[800], - barPercentage: 0.66, - categoryPercentage: 0.66, - }, - // Stack - { - label: 'Referral', - data: [ - 2500, 2600, 4000, 4000, 4800, 3500, - ], - backgroundColor: tailwindConfig().theme.colors.indigo[500], - hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600], - barPercentage: 0.66, - categoryPercentage: 0.66, - }, - // Stack - { - label: 'Organic Search', - data: [ - 2300, 2000, 3100, 2700, 1300, 2600, - ], - backgroundColor: tailwindConfig().theme.colors.indigo[300], - hoverBackgroundColor: tailwindConfig().theme.colors.indigo[400], - barPercentage: 0.66, - categoryPercentage: 0.66, - }, - // Stack - { - label: 'Social', - data: [ - 4800, 4200, 4800, 1800, 3300, 3500, - ], - backgroundColor: tailwindConfig().theme.colors.indigo[100], - hoverBackgroundColor: tailwindConfig().theme.colors.indigo[200], - barPercentage: 0.66, - categoryPercentage: 0.66, - }, - ], - }; - - return ( -
        -
        -

        Acquisition Channels

        -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default AnalyticsCard03; diff --git a/src/partials/analytics/AnalyticsCard04.jsx b/src/partials/analytics/AnalyticsCard04.jsx deleted file mode 100644 index 2a04b06..0000000 --- a/src/partials/analytics/AnalyticsCard04.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import BarChart from '../../charts/BarChart04'; - -// Import utilities -import { tailwindConfig } from '../../utils/Utils'; - -function AnalyticsCard04() { - - const chartData = { - labels: [ - '02-01-2021', '03-01-2021', '04-01-2021', '05-01-2021', - ], - datasets: [ - // Blue bars - { - label: 'New Visitors', - data: [ - 8000, 3800, 5350, 7800, - ], - backgroundColor: tailwindConfig().theme.colors.indigo[500], - hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600], - categoryPercentage: 0.66, - }, - // Light blue bars - { - label: 'Returning Visitors', - data: [ - 4000, 6500, 2200, 5800, - ], - backgroundColor: tailwindConfig().theme.colors.sky[400], - hoverBackgroundColor: tailwindConfig().theme.colors.sky[500], - categoryPercentage: 0.66, - }, - ], - }; - - return ( -
        -
        -

        Audience Overview

        -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default AnalyticsCard04; diff --git a/src/partials/analytics/AnalyticsCard05.jsx b/src/partials/analytics/AnalyticsCard05.jsx deleted file mode 100644 index 93f4007..0000000 --- a/src/partials/analytics/AnalyticsCard05.jsx +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -function AnalyticsCard05() { - return ( -
        -
        -

        Top Channels

        -
        -
        -
        - {/* Card content */} -
        -
          -
        • Source
          • -
        • Visitors
          • -
        - -
          - {/* Item */} -
        • - -
          -
          Google
          -
          4.7K
          -
          -
          • - {/* Item */} -
        • - -
          -
          Indiehackers.com
          -
          4.2K
          -
          -
          • - {/* Item */} -
        • - -
          -
          DuckDuckGo
          -
          3.4K
          -
          -
          • - {/* Item */} -
        • - -
          -
          Hacker News
          -
          3.1K
          -
          -
          • - {/* Item */} -
        • - -
          -
          Github.com
          -
          2.2K
          -
          -
          • - {/* Item */} -
        • - -
          -
          Madewithvuejs.com
          -
          1.7K
          -
          -
          • - {/* Item */} -
        • - -
          -
          Producthunt.com
          -
          924
          -
          -
          • - {/* Item */} -
        • - -
          -
          Dev.to
          -
          696
          -
          -
          • -
        -
        - {/* Card footer */} -
        - Channels Report -> -
        -
        -
        -
        - ); -} - -export default AnalyticsCard05; diff --git a/src/partials/analytics/AnalyticsCard06.jsx b/src/partials/analytics/AnalyticsCard06.jsx deleted file mode 100644 index ee0ebcb..0000000 --- a/src/partials/analytics/AnalyticsCard06.jsx +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -function AnalyticsCard06() { - return ( -
        -
        -

        Top Pages

        -
        -
        -
        - {/* Card content */} -
        -
          -
        • Source
          • -
        • Pageviews
          • -
        - -
          - {/* Item */} -
        • - -
          -
          cruip.com/
          -
          28K
          -
          -
          • - {/* Item */} -
        • - -
          -
          preview.cruip.com/open-pro/
          -
          12K
          -
          -
          • - {/* Item */} -
        • - -
          -
          preview.cruip.com/appy/
          -
          9.7K
          -
          -
          • - {/* Item */} -
        • - -
          -
          cruip.com/unlimited/
          -
          9.2K
          -
          -
          • - {/* Item */} -
        • - -
          -
          preview.cruip.com/simple/
          -
          7K
          -
          -
          • - {/* Item */} -
        • - -
          -
          cruip.com/about-us/
          -
          6.4K
          -
          -
          • - {/* Item */} -
        • - -
          -
          docs.cruip.com/
          -
          5.4K
          -
          -
          • - {/* Item */} -
        • - -
          -
          preview.cruip.com/twist/
          -
          2.2K
          -
          -
          • -
        -
        - {/* Card footer */} -
        - Page Report -> -
        -
        -
        -
        - ); -} - -export default AnalyticsCard06; diff --git a/src/partials/analytics/AnalyticsCard07.jsx b/src/partials/analytics/AnalyticsCard07.jsx deleted file mode 100644 index 11db7a2..0000000 --- a/src/partials/analytics/AnalyticsCard07.jsx +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -function AnalyticsCard07() { - return ( -
        -
        -

        Top Countries

        -
        -
        -
        - {/* Card content */} -
        -
          -
        • Source
          • -
        • Sessions
          • -
        - -
          - {/* Item */} -
        • - -
          -
          ๐Ÿ‡จ๐Ÿ‡ฎ Ireland
          -
          4.2K
          -
          -
          • - {/* Item */} -
        • - -
          -
          ๐Ÿ‡บ๐Ÿ‡ธ United States
          -
          3.4K
          -
          -
          • - {/* Item */} -
        • - -
          -
          ๐Ÿ‡ฉ๐Ÿ‡ช Germany
          -
          1.6k
          -
          -
          • - {/* Item */} -
        • - -
          -
          ๐Ÿ‡ฎ๐Ÿ‡น Italy
          -
          1.2k
          -
          -
          • - {/* Item */} -
        • - -
          -
          ๐Ÿ‡ฌ๐Ÿ‡ง United Kingdom
          -
          912
          -
          -
          • - {/* Item */} -
        • - -
          -
          ๐Ÿ‡ซ๐Ÿ‡ท France
          -
          677
          -
          -
          • - {/* Item */} -
        • - -
          -
          ๐Ÿ‡ฎ๐Ÿ‡ณ India
          -
          449
          -
          -
          • - {/* Item */} -
        • - -
          -
          ๐Ÿ‡ธ๐Ÿ‡ฌ Singapore
          -
          269
          -
          -
          • -
        -
        - {/* Card footer */} -
        - Countries Report -> -
        -
        -
        -
        - ); -} - -export default AnalyticsCard07; diff --git a/src/partials/analytics/AnalyticsCard08.jsx b/src/partials/analytics/AnalyticsCard08.jsx deleted file mode 100644 index 2c543b3..0000000 --- a/src/partials/analytics/AnalyticsCard08.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import DoughnutChart from '../../charts/DoughnutChart'; - -// Import utilities -import { tailwindConfig } from '../../utils/Utils'; - -function AnalyticsCard08() { - - const chartData = { - labels: ['Desktop', 'Mobile', 'Tablet'], - datasets: [ - { - label: 'Sessions By Device', - data: [ - 12, 50, 38, - ], - backgroundColor: [ - tailwindConfig().theme.colors.indigo[500], - tailwindConfig().theme.colors.sky[400], - tailwindConfig().theme.colors.indigo[800], - ], - hoverBackgroundColor: [ - tailwindConfig().theme.colors.indigo[600], - tailwindConfig().theme.colors.sky[500], - tailwindConfig().theme.colors.indigo[900], - ], - hoverBorderColor: tailwindConfig().theme.colors.white, - }, - ], - }; - - return ( -
        -
        -

        Sessions By Device

        -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default AnalyticsCard08; diff --git a/src/partials/analytics/AnalyticsCard09.jsx b/src/partials/analytics/AnalyticsCard09.jsx deleted file mode 100644 index ddf2d70..0000000 --- a/src/partials/analytics/AnalyticsCard09.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import DoughnutChart from '../../charts/DoughnutChart'; - -// Import utilities -import { tailwindConfig } from '../../utils/Utils'; - -function AnalyticsCard09() { - - const chartData = { - labels: ['<18', '18-24', '24-36', '>35'], - datasets: [ - { - label: 'Visit By Age Category', - data: [ - 30, 50, 5, 15, - ], - backgroundColor: [ - tailwindConfig().theme.colors.indigo[500], - tailwindConfig().theme.colors.sky[400], - tailwindConfig().theme.colors.rose[500], - tailwindConfig().theme.colors.emerald[500], - ], - hoverBackgroundColor: [ - tailwindConfig().theme.colors.indigo[600], - tailwindConfig().theme.colors.sky[500], - tailwindConfig().theme.colors.rose[600], - tailwindConfig().theme.colors.emerald[600], - ], - hoverBorderColor: tailwindConfig().theme.colors.white, - }, - ], - }; - - return ( -
        -
        -

        Sessions By Age

        -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default AnalyticsCard09; diff --git a/src/partials/analytics/AnalyticsCard10.jsx b/src/partials/analytics/AnalyticsCard10.jsx deleted file mode 100644 index e65fa82..0000000 --- a/src/partials/analytics/AnalyticsCard10.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import PolarChart from '../../charts/PolarChart'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function AnalyticsCard10() { - - const chartData = { - labels: ['Males', 'Females', 'Unknown'], - datasets: [ - { - label: 'Sessions By Gender', - data: [ - 500, 326, 242, - ], - backgroundColor: [ - `rgba(${hexToRGB(tailwindConfig().theme.colors.indigo[500])}, 0.8)`, - `rgba(${hexToRGB(tailwindConfig().theme.colors.sky[400])}, 0.8)`, - `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.8)`, - ], - hoverBackgroundColor: [ - `rgba(${hexToRGB(tailwindConfig().theme.colors.indigo[600])}, 0.8)`, - `rgba(${hexToRGB(tailwindConfig().theme.colors.sky[500])}, 0.8)`, - `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[600])}, 0.8)`, - ], - hoverBorderColor: tailwindConfig().theme.colors.white, - }, - ], - }; - - return ( -
        -
        -

        Sessions By Gender

        -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default AnalyticsCard10; diff --git a/src/partials/analytics/AnalyticsCard11.jsx b/src/partials/analytics/AnalyticsCard11.jsx deleted file mode 100644 index 6954513..0000000 --- a/src/partials/analytics/AnalyticsCard11.jsx +++ /dev/null @@ -1,280 +0,0 @@ -import React from 'react'; - -import Image01 from '../../images/user-28-01.jpg'; -import Image02 from '../../images/user-28-02.jpg'; -import Image03 from '../../images/user-28-03.jpg'; -import Image04 from '../../images/user-28-04.jpg'; -import Image05 from '../../images/user-28-05.jpg'; -import Image06 from '../../images/user-28-06.jpg'; -import Image07 from '../../images/user-28-07.jpg'; -import Image09 from '../../images/user-28-09.jpg'; -import Image11 from '../../images/user-28-11.jpg'; - -function AnalyticsCard11() { - return ( -
        -
        -

        Top Products

        -
        -
        - - {/* Table */} -
        - - {/* Table header */} - - - - - - - - - - - - {/* Table body */} - - {/* Row */} - - - - - - - - - - {/* Row */} - - - - - - - - - - {/* Row */} - - - - - - - - - - {/* Row */} - - - - - - - - - - {/* Row */} - - - - - - - - - - -
        -
        Product
        -         		-
        Created by
        -         		-
        Category
        -         		-
        Total impressions
        -         		-
        Top country
        -         		-
        CR
        -         		-
        Value
        -
        -
        -
        - - - -
        -
        Form Builder CP
        -
        -         		- - -
        - - - -
        Subscription
        -
        -         		-
        20,929
        -         		-
        ๐Ÿ‡บ๐Ÿ‡ธ
        -         		-
        27.4%
        -         		-
        $12,499.77
        -
        -
        -
        - - - -
        -
        Machine Learning A-Z
        -
        -         		- - -
        - - - -
        Subscription
        -
        -         		-
        17,944
        -         		-
        ๐Ÿ‡ฌ๐Ÿ‡ง
        -         		-
        22.6%
        -         		-
        $4,227.09
        -
        -
        -
        - - - -
        -
        2021 Web Bootcamp
        -
        -         		-
        - - User 05 - -
        -         		-
        - - - -
        Subscription
        -
        -         		-
        16,097
        -         		-
        ๐Ÿ‡ซ๐Ÿ‡ท
        -         		-
        22.4%
        -         		-
        $2,499.77
        -
        -
        -
        - - - -
        -
        Digital Marketing Course
        -
        -         		- - -
        - - - -
        Subscription
        -
        -         		-
        12,996
        -         		-
        ๐Ÿ‡ฎ๐Ÿ‡น
        -         		-
        22.1%
        -         		-
        $2,224.09
        -
        -
        -
        - - - - -
        -
        Form Builder PRO
        -
        -         		- - -
        - - - -
        Subscription
        -
        -         		-
        7,097
        -         		-
        ๐Ÿ‡ฉ๐Ÿ‡ช
        -         		-
        17.4%
        -         		-
        $1,949.72
        -
        - -
        -
        -
        - ); -} - -export default AnalyticsCard11; diff --git a/src/partials/dashboard/DashboardAvatars.jsx b/src/partials/dashboard/DashboardAvatars.jsx deleted file mode 100644 index a0ce901..0000000 --- a/src/partials/dashboard/DashboardAvatars.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import User01 from '../../images/user-36-01.jpg'; -import User02 from '../../images/user-36-02.jpg'; -import User03 from '../../images/user-36-03.jpg'; -import User04 from '../../images/user-36-04.jpg'; - -function DashboardAvatars() { - return ( - - ); -} - -export default DashboardAvatars; diff --git a/src/partials/dashboard/DashboardCard01.jsx b/src/partials/dashboard/DashboardCard01.jsx deleted file mode 100644 index 543713d..0000000 --- a/src/partials/dashboard/DashboardCard01.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import LineChart from '../../charts/LineChart01'; -import Icon from '../../images/icon-01.svg'; -import EditMenu from '../../components/DropdownEditMenu'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function DashboardCard01() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - '06-01-2021', '07-01-2021', '08-01-2021', - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', - ], - datasets: [ - // Indigo line - { - data: [ - 732, 610, 610, 504, 504, 504, 349, - 349, 504, 342, 504, 610, 391, 192, - 154, 273, 191, 191, 126, 263, 349, - 252, 423, 622, 470, 532, - ], - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`, - borderColor: tailwindConfig().theme.colors.indigo[500], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], - clip: 20, - }, - // Gray line - { - data: [ - 532, 532, 532, 404, 404, 314, 314, - 314, 314, 314, 234, 314, 234, 234, - 314, 314, 314, 388, 314, 202, 202, - 202, 202, 314, 720, 642, - ], - borderColor: tailwindConfig().theme.colors.slate[300], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.slate[300], - clip: 20, - }, - ], - }; - - return ( -
        -
        -
        - {/* Icon */} - Icon 01 - {/* Menu button */} - -
      • - Option 1 -
        • -
      • - Option 2 -
        • -
      • - Remove -
        • -         -
        -

        Acme Plus

        -
        Sales
        -
        -
        $24,780
        -
        +49%
        -
        -
        - {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -
        - ); -} - -export default DashboardCard01; diff --git a/src/partials/dashboard/DashboardCard02.jsx b/src/partials/dashboard/DashboardCard02.jsx deleted file mode 100644 index ead6a64..0000000 --- a/src/partials/dashboard/DashboardCard02.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import LineChart from '../../charts/LineChart01'; -import Icon from '../../images/icon-02.svg'; -import EditMenu from '../../components/DropdownEditMenu'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function DashboardCard02() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - '06-01-2021', '07-01-2021', '08-01-2021', - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', - ], - datasets: [ - // Indigo line - { - data: [ - 622, 622, 426, 471, 365, 365, 238, - 324, 288, 206, 324, 324, 500, 409, - 409, 273, 232, 273, 500, 570, 767, - 808, 685, 767, 685, 685, - ], - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`, - borderColor: tailwindConfig().theme.colors.indigo[500], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], - clip: 20, - }, - // Gray line - { - data: [ - 732, 610, 610, 504, 504, 504, 349, - 349, 504, 342, 504, 610, 391, 192, - 154, 273, 191, 191, 126, 263, 349, - 252, 423, 622, 470, 532, - ], - borderColor: tailwindConfig().theme.colors.slate[300], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.slate[300], - clip: 20, - }, - ], - }; - - return ( -
        -
        -
        - {/* Icon */} - Icon 02 - {/* Menu button */} - -
      • - Option 1 -
        • -
      • - Option 2 -
        • -
      • - Remove -
        • -         -
        -

        Acme Advanced

        -
        Sales
        -
        -
        $17,489
        -
        -14%
        -
        -
        - {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -
        - ); -} - -export default DashboardCard02; diff --git a/src/partials/dashboard/DashboardCard03.jsx b/src/partials/dashboard/DashboardCard03.jsx deleted file mode 100644 index 522ce04..0000000 --- a/src/partials/dashboard/DashboardCard03.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import LineChart from '../../charts/LineChart01'; -import Icon from '../../images/icon-03.svg'; -import EditMenu from '../../components/DropdownEditMenu'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function DashboardCard03() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - '06-01-2021', '07-01-2021', '08-01-2021', - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', - ], - datasets: [ - // Indigo line - { - data: [ - 540, 466, 540, 466, 385, 432, 334, - 334, 289, 289, 200, 289, 222, 289, - 289, 403, 554, 304, 289, 270, 134, - 270, 829, 344, 388, 364, - ], - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`, - borderColor: tailwindConfig().theme.colors.indigo[500], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], - clip: 20, - }, - // Gray line - { - data: [ - 689, 562, 477, 477, 477, 477, 458, - 314, 430, 378, 430, 498, 642, 350, - 145, 145, 354, 260, 188, 188, 300, - 300, 282, 364, 660, 554, - ], - borderColor: tailwindConfig().theme.colors.slate[300], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.slate[300], - clip: 20, - }, - ], - }; - - return ( -
        -
        -
        - {/* Icon */} - Icon 03 - {/* Menu button */} - -
      • - Option 1 -
        • -
      • - Option 2 -
        • -
      • - Remove -
        • -         -
        -

        Acme Professional

        -
        Sales
        -
        -
        $9,962
        -
        +49%
        -
        -
        - {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -
        - ); -} - -export default DashboardCard03; diff --git a/src/partials/dashboard/DashboardCard04.jsx b/src/partials/dashboard/DashboardCard04.jsx deleted file mode 100644 index e6e0792..0000000 --- a/src/partials/dashboard/DashboardCard04.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import BarChart from '../../charts/BarChart01'; - -// Import utilities -import { tailwindConfig } from '../../utils/Utils'; - -function DashboardCard04() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - ], - datasets: [ - // Light blue bars - { - label: 'Direct', - data: [ - 800, 1600, 900, 1300, 1950, 1700, - ], - backgroundColor: tailwindConfig().theme.colors.blue[400], - hoverBackgroundColor: tailwindConfig().theme.colors.blue[500], - barPercentage: 0.66, - categoryPercentage: 0.66, - }, - // Blue bars - { - label: 'Indirect', - data: [ - 4900, 2600, 5350, 4800, 5200, 4800, - ], - backgroundColor: tailwindConfig().theme.colors.indigo[500], - hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600], - barPercentage: 0.66, - categoryPercentage: 0.66, - }, - ], - }; - - return ( -
        -
        -

        Direct VS Indirect

        -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default DashboardCard04; diff --git a/src/partials/dashboard/DashboardCard05.jsx b/src/partials/dashboard/DashboardCard05.jsx deleted file mode 100644 index d9040bc..0000000 --- a/src/partials/dashboard/DashboardCard05.jsx +++ /dev/null @@ -1,100 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import Tooltip from '../../components/Tooltip'; -import RealtimeChart from '../../charts/RealtimeChart'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function DashboardCard05() { - - // IMPORTANT: - // Code below is for demo purpose only, and it's not covered by support. - // If you need to replace dummy data with real data, - // refer to Chart.js documentation: https://www.chartjs.org/docs/latest - - // Fake real-time data - const [counter, setCounter] = useState(0); - const [increment, setIncrement] = useState(0); - const [range, setRange] = useState(35); - - // Dummy data to be looped - const data = [ - 57.81, 57.75, 55.48, 54.28, 53.14, 52.25, 51.04, 52.49, 55.49, 56.87, - 53.73, 56.42, 58.06, 55.62, 58.16, 55.22, 58.67, 60.18, 61.31, 63.25, - 65.91, 64.44, 65.97, 62.27, 60.96, 59.34, 55.07, 59.85, 53.79, 51.92, - 50.95, 49.65, 48.09, 49.81, 47.85, 49.52, 50.21, 52.22, 54.42, 53.42, - 50.91, 58.52, 53.37, 57.58, 59.09, 59.36, 58.71, 59.42, 55.93, 57.71, - 50.62, 56.28, 57.37, 53.08, 55.94, 55.82, 53.94, 52.65, 50.25, - ]; - - const [slicedData, setSlicedData] = useState(data.slice(0, range)); - - // Generate fake dates from now to back in time - const generateDates = () => { - const now = new Date(); - const dates = []; - data.forEach((v, i) => { - dates.push(new Date(now - 2000 - i * 2000)); - }); - return dates; - }; - - const [slicedLabels, setSlicedLabels] = useState(generateDates().slice(0, range).reverse()); - - // Fake update every 2 seconds - useEffect(() => { - const interval = setInterval(() => { - setCounter(counter + 1); - }, 2000); - return () => clearInterval(interval) - }, [counter]); - - // Loop through data array and update - useEffect(() => { - setIncrement(increment + 1); - if (increment + range < data.length) { - setSlicedData(([x, ...slicedData]) => [...slicedData, data[increment + range]]); - } else { - setIncrement(0); - setRange(0); - } - setSlicedLabels(([x, ...slicedLabels]) => [...slicedLabels, new Date()]); - return () => setIncrement(0) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [counter]); - - const chartData = { - labels: slicedLabels, - datasets: [ - // Indigo line - { - data: slicedData, - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`, - borderColor: tailwindConfig().theme.colors.indigo[500], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], - clip: 20, - }, - ], - }; - - return ( -
        -
        -

        Real Time Value

        - -
        Built with Chart.js
        -         -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default DashboardCard05; diff --git a/src/partials/dashboard/DashboardCard06.jsx b/src/partials/dashboard/DashboardCard06.jsx deleted file mode 100644 index 88e12a4..0000000 --- a/src/partials/dashboard/DashboardCard06.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import DoughnutChart from '../../charts/DoughnutChart'; - -// Import utilities -import { tailwindConfig } from '../../utils/Utils'; - -function DashboardCard06() { - - const chartData = { - labels: ['United States', 'Italy', 'Other'], - datasets: [ - { - label: 'Top Countries', - data: [ - 35, 30, 35, - ], - backgroundColor: [ - tailwindConfig().theme.colors.indigo[500], - tailwindConfig().theme.colors.blue[400], - tailwindConfig().theme.colors.indigo[800], - ], - hoverBackgroundColor: [ - tailwindConfig().theme.colors.indigo[600], - tailwindConfig().theme.colors.blue[500], - tailwindConfig().theme.colors.indigo[900], - ], - hoverBorderColor: tailwindConfig().theme.colors.white, - }, - ], - }; - - return ( -
        -
        -

        Top Countries

        -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default DashboardCard06; diff --git a/src/partials/dashboard/DashboardCard07.jsx b/src/partials/dashboard/DashboardCard07.jsx deleted file mode 100644 index 9b8f73d..0000000 --- a/src/partials/dashboard/DashboardCard07.jsx +++ /dev/null @@ -1,165 +0,0 @@ -import React from 'react'; - -function DashboardCard07() { - return ( -
        -
        -

        Top Channels

        -
        -
        - - {/* Table */} -
        - - {/* Table header */} - - - - - - - - - - {/* Table body */} - - {/* Row */} - - - - - - - - {/* Row */} - - - - - - - - {/* Row */} - - - - - - - - {/* Row */} - - - - - - - - {/* Row */} - - - - - - - - -
        -
        Source
        -         		-
        Visitors
        -         		-
        Revenues
        -         		-
        Sales
        -         		-
        Conversion
        -
        -
        - - - - -
        Github.com
        -
        -         		-
        2.4K
        -         		-
        $3,877
        -         		-
        267
        -         		-
        4.7%
        -
        -
        - - - - -
        Twitter
        -
        -         		-
        2.2K
        -         		-
        $3,426
        -         		-
        249
        -         		-
        4.4%
        -
        -
        - - - - -
        Google (organic)
        -
        -         		-
        2.0K
        -         		-
        $2,444
        -         		-
        224
        -         		-
        4.2%
        -
        -
        - - - - -
        Vimeo.com
        -
        -         		-
        1.9K
        -         		-
        $2,236
        -         		-
        220
        -         		-
        4.2%
        -
        -
        - - - - -
        Indiehackers.com
        -
        -         		-
        1.7K
        -         		-
        $2,034
        -         		-
        204
        -         		-
        3.9%
        -
        - -
        -
        -
        - ); -} - -export default DashboardCard07; diff --git a/src/partials/dashboard/DashboardCard08.jsx b/src/partials/dashboard/DashboardCard08.jsx deleted file mode 100644 index cb60be2..0000000 --- a/src/partials/dashboard/DashboardCard08.jsx +++ /dev/null @@ -1,91 +0,0 @@ -import React from 'react'; -import LineChart from '../../charts/LineChart02'; - -// Import utilities -import { tailwindConfig } from '../../utils/Utils'; - -function DashboardCard08() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - '06-01-2021', '07-01-2021', '08-01-2021', - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', - ], - datasets: [ - // Indigo line - { - label: 'Current', - data: [ - 73, 64, 73, 69, 104, 104, 164, - 164, 120, 120, 120, 148, 142, 104, - 122, 110, 104, 152, 166, 233, 268, - 252, 284, 284, 333, 323, - ], - borderColor: tailwindConfig().theme.colors.indigo[500], - fill: false, - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], - clip: 20, - }, - // Blue line - { - label: 'Previous', - data: [ - 184, 86, 42, 378, 42, 243, 38, - 120, 0, 0, 42, 0, 84, 0, - 276, 0, 124, 42, 124, 88, 88, - 215, 156, 88, 124, 64, - ], - borderColor: tailwindConfig().theme.colors.blue[400], - fill: false, - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.blue[400], - clip: 20, - }, - // emerald line - { - label: 'Average', - data: [ - 122, 170, 192, 86, 102, 124, 115, - 115, 56, 104, 0, 72, 208, 186, - 223, 188, 114, 162, 200, 150, 118, - 118, 76, 122, 230, 268, - ], - borderColor: tailwindConfig().theme.colors.emerald[500], - fill: false, - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.emerald[500], - clip: 20, - }, - ], - }; - - return ( -
        -
        -

        Sales Over Time (all stores)

        -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default DashboardCard08; diff --git a/src/partials/dashboard/DashboardCard09.jsx b/src/partials/dashboard/DashboardCard09.jsx deleted file mode 100644 index bb99304..0000000 --- a/src/partials/dashboard/DashboardCard09.jsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import Tooltip from '../../components/Tooltip'; -import BarChart from '../../charts/BarChart02'; - -// Import utilities -import { tailwindConfig } from '../../utils/Utils'; - -function DashboardCard09() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - ], - datasets: [ - // Light blue bars - { - label: 'Stack 1', - data: [ - 6200, 9200, 6600, 8800, 5200, 9200, - ], - backgroundColor: tailwindConfig().theme.colors.indigo[500], - hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600], - barPercentage: 0.66, - categoryPercentage: 0.66, - }, - // Blue bars - { - label: 'Stack 2', - data: [ - -4000, -2600, -5350, -4000, -7500, -2000, - ], - backgroundColor: tailwindConfig().theme.colors.indigo[200], - hoverBackgroundColor: tailwindConfig().theme.colors.indigo[300], - barPercentage: 0.66, - categoryPercentage: 0.66, - }, - ], - }; - - return ( -
        -
        -

        Sales VS Refunds

        - -
        Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
        -         -
        -
        -
        -
        +$6,796
        -
        -34%
        -
        -
        - {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -
        - ); -} - -export default DashboardCard09; diff --git a/src/partials/dashboard/DashboardCard10.jsx b/src/partials/dashboard/DashboardCard10.jsx deleted file mode 100644 index 8d23bef..0000000 --- a/src/partials/dashboard/DashboardCard10.jsx +++ /dev/null @@ -1,110 +0,0 @@ -import React from 'react'; - -function DashboardCard10() { - return ( -
        -
        -

        Recent Activity

        -
        -
        - - {/* Card content */} - {/* "Today" group */} -
        -
        Today
        - -
        - {/* "Yesterday" group */} -
        -
        Yesterday
        - -
        - -
        -
        - ); -} - -export default DashboardCard10; diff --git a/src/partials/dashboard/DashboardCard11.jsx b/src/partials/dashboard/DashboardCard11.jsx deleted file mode 100644 index 61b0d94..0000000 --- a/src/partials/dashboard/DashboardCard11.jsx +++ /dev/null @@ -1,120 +0,0 @@ -import React from 'react'; - -function DashboardCard11() { - return ( -
        -
        -

        Income/Expenses

        -
        -
        - - {/* Card content */} - {/* "Today" group */} -
        -
        Today
        -
          - {/* Item */} -
        • -
          - - - -
          -
          -
          -
          Qonto billing
          -
          - -$49.88 -
          -
          -
          -
          • - {/* Item */} -
        • -
          - - - -
          -
          -
          -
          Cruip.com Market Ltd 70 Wilson St London
          -
          - +249.88 -
          -
          -
          -
          • - {/* Item */} -
        • -
          - - - -
          -
          -
          - -
          - +99.99 -
          -
          -
          -
          • - {/* Item */} -
        • -
          - - - -
          -
          -
          - -
          - +1,200.88 -
          -
          -
          -
          • - {/* Item */} -
        • -
          - - - -
          -
          -
          -
          App.com Market Ltd 70 Wilson St London
          -
          - +$99.99 -
          -
          -
          -
          • - {/* Item */} -
        • -
          - - - -
          -
          -
          -
          App.com Market Ltd 70 Wilson St London
          -
          - -$49.88 -
          -
          -
          -
          • -
        -
        - -
        -
        - ); -} - -export default DashboardCard11; diff --git a/src/partials/dashboard/WelcomeBanner.jsx b/src/partials/dashboard/WelcomeBanner.jsx deleted file mode 100644 index 71107e2..0000000 --- a/src/partials/dashboard/WelcomeBanner.jsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; - -function WelcomeBanner() { - return ( -
        - - {/* Background illustration */} - - - {/* Content */} -
        -

        Good afternoon, Acme Inc. ๐Ÿ‘‹

        -

        Here is whatโ€™s happening with your projects today:

        -
        - -
        - ); -} - -export default WelcomeBanner; diff --git a/src/partials/fintech/FintechCard01.jsx b/src/partials/fintech/FintechCard01.jsx deleted file mode 100644 index d094e18..0000000 --- a/src/partials/fintech/FintechCard01.jsx +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import LineChart from '../../charts/LineChart05'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function FintechCard01() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - '06-01-2021', '07-01-2021', '08-01-2021', - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', '02-01-2023', - '03-01-2023', '04-01-2023', '05-01-2023', - '06-01-2023', '07-01-2023', '08-01-2023', - '09-01-2023', '10-01-2023', '11-01-2023', - '12-01-2023', '01-01-2024', '02-01-2024', - '03-01-2024', '04-01-2024', - ], - datasets: [ - // Indigo line - { - label: 'Mosaic Portfolio', - data: [ - 0, 2.5, 2.5, 4, 2.5, 3.8, 5, 9, 7.5, 11, - 14, 15, 17, 15, 14, 9, 15, 26, 16, 18, - 15, 20, 18, 19, 19, 24, 29, 26, 39, 27, - 35, 32, 29, 35, 36, 34, 39, 36, 41, 41, - 48, - ], - borderColor: tailwindConfig().theme.colors.indigo[500], - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`, - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], - clip: 20, - }, - // Yellow line - { - label: 'Expected Return', - data: [ - 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, - 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, - 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, - 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, - 40, - ], - borderColor: tailwindConfig().theme.colors.yellow[400], - borderDash: [4, 4], - fill: false, - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.yellow[400], - clip: 20, - }, - // gray line - { - label: 'Competitors', - data: [ - 0.7, 3.5, 4.5, 3.5, 4.2, 4.6, 6, 7, 6, 6, - 11, 13, 14, 18, 17, 15, 13, 16, 20, 21, - 24, 22, 20, 22, 25, 18, 21, 23, 24, 32, - 28, 29, 35, 37, 42, 32, 32, 33, 33, 37, - 32, - ], - borderColor: tailwindConfig().theme.colors.slate[300], - fill: false, - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.slate[300], - clip: 20, - }, - ], - }; - - return ( -
        -
        -

        Portfolio Returns

        -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default FintechCard01; diff --git a/src/partials/fintech/FintechCard02.jsx b/src/partials/fintech/FintechCard02.jsx deleted file mode 100644 index abe361d..0000000 --- a/src/partials/fintech/FintechCard02.jsx +++ /dev/null @@ -1,133 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import EditMenu from '../../components/DropdownEditMenu'; - -function FintechCard02() { - return ( -
        -
        -

        Active Cards

        -
        -
        - {/* CC container */} -
        - {/* Credit Card */} -
        - {/* Gradients */} - - -
        - {/* Logo on card */} - - - - - - - - - - - - - - - - - - - - - {/* Card number */} -
        - **** - **** - **** - 7328 -
        - {/* Card footer */} -
        - {/* Card expiration */} -
        - EXP 12/24 - CVC *** -
        -
        - {/* Mastercard logo */} - - - - -
        -
        - {/* Options button */} - -
      • - - Option 1 - -
        • -
      • - - Option 2 - -
        • -
      • - - Remove - -
        • -         -
        - {/* Details */} -
        -
        Details
        -
        -
        -
        -
        Payment Limits
        -
        - $780,00 / $1,500.00 -
        -
        -
        - -
        -
        -
        -
        ATM Limits
        -
        - $179,00 / $1,000.00 -
        -
        -
        - -
        -
        -
        -
        -
        - ); -} - -export default FintechCard02; diff --git a/src/partials/fintech/FintechCard03.jsx b/src/partials/fintech/FintechCard03.jsx deleted file mode 100644 index b6146bf..0000000 --- a/src/partials/fintech/FintechCard03.jsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import BarChart from '../../charts/BarChart05'; - -// Import utilities -import { tailwindConfig } from '../../utils/Utils'; - -function FintechCard03() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021' - ], - datasets: [ - // Indigo bars - { - label: 'Inflow', - data: [800, 2600, 4000, 1200, 3200, 1700], - backgroundColor: tailwindConfig().theme.colors.indigo[500], - hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600], - barPercentage: 0.66, - categoryPercentage: 0.66, - }, - // Grey bars - { - label: 'Outflow', - data: [2800, 1700, 900, 2900, 1950, 3100], - backgroundColor: tailwindConfig().theme.colors.slate[300], - hoverBackgroundColor: tailwindConfig().theme.colors.slate[400], - barPercentage: 0.66, - categoryPercentage: 0.66, - }, - ], - }; - - return ( -
        -
        -

        Cash Flow

        -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default FintechCard03; diff --git a/src/partials/fintech/FintechCard04.jsx b/src/partials/fintech/FintechCard04.jsx deleted file mode 100644 index b77f7dd..0000000 --- a/src/partials/fintech/FintechCard04.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import BarChart from '../../charts/BarChart06'; - -// Import utilities -import { tailwindConfig } from '../../utils/Utils'; - -function FintechCard04() { - - const chartData = { - labels: [ - '02-01-2021', '03-01-2021', '04-01-2021', '05-01-2021', - ], - datasets: [ - // Indigo bars - { - label: 'Inflow', - data: [ - 4100, 1900, 2700, 3900, - ], - backgroundColor: tailwindConfig().theme.colors.indigo[500], - hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600], - categoryPercentage: 0.66, - }, - // Gray bars - { - label: 'Outflow', - data: [ - 2000, 1000, 1100, 2600, - ], - backgroundColor: tailwindConfig().theme.colors.slate[300], - hoverBackgroundColor: tailwindConfig().theme.colors.slate[400], - categoryPercentage: 0.66, - }, - ], - }; - - return ( -
        -
        -

        Cash Flow by Account

        -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default FintechCard04; diff --git a/src/partials/fintech/FintechCard05.jsx b/src/partials/fintech/FintechCard05.jsx deleted file mode 100644 index c01d4e8..0000000 --- a/src/partials/fintech/FintechCard05.jsx +++ /dev/null @@ -1,155 +0,0 @@ -import React from 'react'; - -function FintechCard05() { - return ( -
        -
        -

        Recent Expenses

        -
        -
        - {/* Table */} -
        - - {/* Table header */} - - - - - - - - - {/* Table body */} - - {/* Row */} - - - - - - - {/* Row */} - - - - - - - {/* Row */} - - - - - - - {/* Row */} - - - - - - - {/* Row */} - - - - - - - -
        -
        Counterparty
        -         		-
        Account
        -         		-
        Date
        -         		-
        Amount
        -
        -
        -
        - - - -
        -
        Form Builder CP
        -
        -         		-
        Revolut
        -         		-
        22/01/2022
        -         		-
        -$1,299.22
        -
        -
        -
        - - - -
        -
        PublicOne Inc.
        -
        -         		-
        Qonto
        -         		-
        22/01/2022
        -         		-
        -$272.88
        -
        -
        -
        - - - -
        -
        Imperial Hotel ****
        -
        -         		-
        Revolut
        -         		-
        22/01/2022
        -         		-
        -$999.44
        -
        -
        -
        - - - -
        -
        Uber
        -
        -         		-
        N26
        -         		-
        22/01/2022
        -         		-
        -$1,029.77
        -
        -
        -
        - - - -
        -
        Google Limited UK
        -
        -         		-
        N26
        -         		-
        22/01/2022
        -         		-
        -$1,921.26
        -
        -
        - -
        -
        - ); -} - -export default FintechCard05; diff --git a/src/partials/fintech/FintechCard06.jsx b/src/partials/fintech/FintechCard06.jsx deleted file mode 100644 index 5c01515..0000000 --- a/src/partials/fintech/FintechCard06.jsx +++ /dev/null @@ -1,155 +0,0 @@ -import React from 'react'; - -import UserImage from '../../images/user-36-05.jpg'; - -function FintechCard06() { - return ( -
        -
        -

        Recent Earnings

        -
        -
        - {/* Table */} -
        - - {/* Table header */} - - - - - - - - - {/* Table body */} - - {/* Row */} - - - - - - - {/* Row */} - - - - - - - {/* Row */} - - - - - - - {/* Row */} - - - - - - - {/* Row */} - - - - - - - -
        -
        Counterparty
        -         		-
        Account
        -         		-
        Date
        -         		-
        Amount
        -
        -
        -
        - - - -
        -
        Acme LTD UK
        -
        -         		-
        Revolut
        -         		-
        22/01/2022
        -         		-
        +$1,299.22
        -
        -
        -
        - - - -
        -
        Web.com
        -
        -         		-
        Qonto
        -         		-
        22/01/2022
        -         		-
        +$1,200.88
        -
        -
        -
        - - - -
        -
        Github Inc.
        -
        -         		-
        N26
        -         		-
        22/01/2022
        -         		-
        +$499.99
        -
        -
        -
        - User 05 -
        -
        Aprilynne Pills
        -
        -         		-
        Revolut
        -         		-
        22/01/2022
        -         		-
        +$2,179.36
        -
        -
        -
        - - - -
        -
        Form Builder PRO
        -
        -         		-
        Revolut
        -         		-
        22/01/2022
        -         		-
        +$249.88
        -
        -
        - -
        -
        - ); -} - -export default FintechCard06; diff --git a/src/partials/fintech/FintechCard07.jsx b/src/partials/fintech/FintechCard07.jsx deleted file mode 100644 index d807102..0000000 --- a/src/partials/fintech/FintechCard07.jsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import LineChart from '../../charts/LineChart06'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function FintechCard07() { - - const chartData = { - labels: [ - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', '02-01-2023', - '03-01-2023', '04-01-2023', - ], - datasets: [ - // Indigo line - { - label: 'Mosaic Portfolio', - data: [ - 1500, 2000, 1800, 1900, 1900, 2400, 2900, 2600, 3900, 2700, - 3500, 3200, 2900, 3500, 3600, 3400, 3900, 3600, 4100, 4100, - ], - borderColor: tailwindConfig().theme.colors.indigo[500], - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`, - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], - clip: 20, - }, - // Gray line - { - label: 'Expected Return', - data: [ - 2000, 2100, 2200, 2300, 2400, 2500, 2600, 2700, 2800, 2900, - 3000, 3100, 3200, 3300, 3400, 3500, 3600, 3700, 3800, 3900, - ], - borderColor: tailwindConfig().theme.colors.slate[300], - fill: false, - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.slate[300], - clip: 20, - }, - ], - }; - - return ( -
        -
        -

        Portfolio Returns

        -
        -
        -
        Hey Mark, you're very close to your goal:
        -
        -
        $5,247.09
        -
        97.4%
        -
        -
        Out of $6,000
        -
        - {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -
        - ); -} - -export default FintechCard07; diff --git a/src/partials/fintech/FintechCard08.jsx b/src/partials/fintech/FintechCard08.jsx deleted file mode 100644 index f66b98a..0000000 --- a/src/partials/fintech/FintechCard08.jsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; -import LineChart from '../../charts/LineChart07'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function FintechCard08() { - - const chartData = { - labels: ['2010', 'Age 65'], - datasets: [ - // Dark green line - { - label: 'Growth 1', - data: [0, 3500000], - borderColor: tailwindConfig().theme.colors.emerald[500], - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.08)`, - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.emerald[500], - clip: 20, - }, - // Light green line - { - label: 'Growth 2', - data: [0, 2000000], - borderColor: tailwindConfig().theme.colors.emerald[200], - fill: false, - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.emerald[200], - clip: 20, - }, - ], - }; - - return ( -
        -
        -

        Growth Portfolio

        -
        -
        -
        Hey Mark, by age 65 you could have:
        -
        $2M - $3.5M
        -
        Risk level 8
        -
        - {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -
        - ); -} - -export default FintechCard08; diff --git a/src/partials/fintech/FintechCard09.jsx b/src/partials/fintech/FintechCard09.jsx deleted file mode 100644 index 7df13ad..0000000 --- a/src/partials/fintech/FintechCard09.jsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import PieChart from '../../charts/PieChart'; - -// Import utilities -import { tailwindConfig } from '../../utils/Utils'; - -function FintechCard09() { - - const chartData = { - labels: ['Cash', 'Commodities', 'Bonds', 'Stock'], - datasets: [ - { - label: 'Sessions By Device', - data: [12, 13, 10, 65], - backgroundColor: [ - tailwindConfig().theme.colors.emerald[400], - tailwindConfig().theme.colors.yellow[400], - tailwindConfig().theme.colors.sky[400], - tailwindConfig().theme.colors.indigo[500], - ], - hoverBackgroundColor: [ - tailwindConfig().theme.colors.emerald[500], - tailwindConfig().theme.colors.yellow[500], - tailwindConfig().theme.colors.sky[500], - tailwindConfig().theme.colors.indigo[600], - ], - borderWidth: 0, - }, - ], - }; - - return ( -
        -
        -

        Portfolio Value

        -
        -
        -
        Hey Mark, here is the value of your portfolio:
        -
        $224,807.27
        -
        - {/* Chart built with Chart.js 3 */} - {/* Change the height attribute to adjust the chart height */} - -
        - ); -} - -export default FintechCard09; diff --git a/src/partials/fintech/FintechCard10.jsx b/src/partials/fintech/FintechCard10.jsx deleted file mode 100644 index 50abd79..0000000 --- a/src/partials/fintech/FintechCard10.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import LineChart from '../../charts/LineChart08'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function FintechCard10() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - '06-01-2021', '07-01-2021', '08-01-2021', - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', - ], - datasets: [ - // Line - { - data: [ - 732, 610, 610, 504, 504, 504, 349, - 349, 504, 342, 504, 610, 391, 192, - 154, 273, 191, 191, 126, 263, 349, - 252, 323, 322, 270, 232, - ], - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.rose[500])}, 0.08)`, - borderColor: tailwindConfig().theme.colors.rose[500], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.rose[500], - clip: 20, - }, - ], - }; - - return ( -
        -
        -
        -

        - Google - Alphabet -

        -
        $2,860.96
        -
        - -$49 (4,7%) - Today -
        -
        -
        - {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -
        - ); -} - -export default FintechCard10; diff --git a/src/partials/fintech/FintechCard11.jsx b/src/partials/fintech/FintechCard11.jsx deleted file mode 100644 index ddfe906..0000000 --- a/src/partials/fintech/FintechCard11.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import LineChart from '../../charts/LineChart08'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function FintechCard11() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - '06-01-2021', '07-01-2021', '08-01-2021', - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', - ], - datasets: [ - // Line - { - data: [ - 222, 222, 226, 271, 365, 365, 238, - 324, 288, 206, 324, 324, 500, 409, - 409, 273, 232, 273, 500, 570, 767, - 808, 685, 767, 685, 685, - ], - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.08)`, - borderColor: tailwindConfig().theme.colors.emerald[500], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.emerald[500], - clip: 20, - }, - ], - }; - - return ( -
        -
        -
        -

        - Amzn - Amazon Inc. -

        -
        $3,400.35
        -
        - +$142 (3,7%) - Today -
        -
        -
        - {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -
        - ); -} - -export default FintechCard11; diff --git a/src/partials/fintech/FintechCard12.jsx b/src/partials/fintech/FintechCard12.jsx deleted file mode 100644 index 34db40b..0000000 --- a/src/partials/fintech/FintechCard12.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import LineChart from '../../charts/LineChart08'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function FintechCard12() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - '06-01-2021', '07-01-2021', '08-01-2021', - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', - ], - datasets: [ - // Line - { - data: [ - 540, 466, 540, 466, 385, 432, 334, - 334, 289, 289, 200, 289, 222, 289, - 289, 403, 554, 304, 289, 270, 134, - 270, 829, 644, 688, 664, - ], - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.08)`, - borderColor: tailwindConfig().theme.colors.emerald[500], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.emerald[500], - clip: 20, - }, - ], - }; - - return ( -
        -
        -
        -

        - Twtr - Twitter Inc. -

        -
        $43.07
        -
        - +$4,20 (9,2%) - Today -
        -
        -
        - {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -
        - ); -} - -export default FintechCard12; diff --git a/src/partials/fintech/FintechCard13.jsx b/src/partials/fintech/FintechCard13.jsx deleted file mode 100644 index 79c2f3e..0000000 --- a/src/partials/fintech/FintechCard13.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import LineChart from '../../charts/LineChart08'; - -// Import utilities -import { tailwindConfig, hexToRGB } from '../../utils/Utils'; - -function FintechCard13() { - - const chartData = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - '06-01-2021', '07-01-2021', '08-01-2021', - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', - ], - datasets: [ - // Line - { - data: [ - 245, 288, 332, 404, 404, 314, 314, - 314, 314, 314, 234, 314, 234, 234, - 314, 314, 314, 388, 314, 202, 202, - 202, 202, 514, 720, 642, - ], - fill: true, - backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.08)`, - borderColor: tailwindConfig().theme.colors.emerald[500], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: tailwindConfig().theme.colors.emerald[500], - clip: 20, - }, - ], - }; - - return ( -
        -
        -
        -

        - Facebook - Meta Inc. -

        -
        $333.79
        -
        - +$19,70 (4%) - Today -
        -
        -
        - {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -
        - ); -} - -export default FintechCard13; diff --git a/src/partials/fintech/FintechCard14.jsx b/src/partials/fintech/FintechCard14.jsx deleted file mode 100644 index 72fa3c4..0000000 --- a/src/partials/fintech/FintechCard14.jsx +++ /dev/null @@ -1,313 +0,0 @@ -import React from 'react'; -import LineChart from '../../charts/LineChart09'; - -// Import utilities -import { tailwindConfig } from '../../utils/Utils'; - -function FintechCard14() { - - const miniCharts = [ - // Twitter - { - data: [ - 540, 466, 540, 466, 385, 432, 334, - 334, 289, 289, 200, 289, 222, 289, - 289, 403, 554, 304, 289, 270, 134, - 270, 829, 644, 688, 664, - ], - growth: true, - }, - // Facebook - { - data: [ - 245, 288, 332, 404, 404, 314, 314, - 314, 314, 314, 234, 314, 234, 234, - 314, 314, 314, 388, 314, 202, 202, - 202, 202, 514, 720, 642, - ], - growth: true, - }, - // Google - { - data: [ - 732, 610, 610, 504, 504, 504, 349, - 349, 504, 342, 504, 610, 391, 192, - 154, 273, 191, 191, 126, 263, 349, - 252, 323, 322, 270, 232, - ], - growth: false, - }, - // Apple - { - data: [ - 222, 222, 226, 271, 365, 365, 238, - 324, 288, 206, 324, 324, 500, 409, - 409, 273, 232, 273, 500, 570, 767, - 808, 685, 767, 685, 685, - ], - growth: true, - }, - // Coinbase - { - data: [ - 632, 510, 610, 404, 504, 404, 449, - 349, 404, 542, 404, 410, 491, 392, - 254, 273, 291, 191, 226, 363, 449, - 252, 223, 222, 170, 132, - ], - growth: false, - }, - ]; - - const chartData = []; - - const buildChartData = (chart) => { - var obj = { - labels: [ - '12-01-2020', '01-01-2021', '02-01-2021', - '03-01-2021', '04-01-2021', '05-01-2021', - '06-01-2021', '07-01-2021', '08-01-2021', - '09-01-2021', '10-01-2021', '11-01-2021', - '12-01-2021', '01-01-2022', '02-01-2022', - '03-01-2022', '04-01-2022', '05-01-2022', - '06-01-2022', '07-01-2022', '08-01-2022', - '09-01-2022', '10-01-2022', '11-01-2022', - '12-01-2022', '01-01-2023', - ], - datasets: [ - // Line - { - data: chart.data, - borderColor: chart.growth ? tailwindConfig().theme.colors.emerald[500] : tailwindConfig().theme.colors.rose[500], - borderWidth: 2, - tension: 0, - pointRadius: 0, - pointHoverRadius: 3, - pointBackgroundColor: chart.growth ? tailwindConfig().theme.colors.emerald[500] : tailwindConfig().theme.colors.rose[500], - clip: 20, - }, - ], - } - return obj; - }; - - miniCharts.map((miniChart) => { - chartData.push(buildChartData(miniChart)); - }); - - return ( -
        -
        -

        Market Trends

        -
        -
        - {/* Table */} -
        - - {/* Table header */} - - - - - - - - - - {/* Table body */} - - {/* Row */} - - - - - - - - {/* Row */} - - - - - - - - {/* Row */} - - - - - - - - {/* Row */} - - - - - - - - {/* Row */} - - - - - - - - -
        -
        Market
        -         		-
        Mkt Cap
        -         		-
        Chart
        -         		-
        Price
        -         		-
        Chg. (24h)
        -
        -
        - - - - -
        -
        Twtr
        -
        Twitter Inc.
        -
        -
        -         		-
        33.94B
        -         		- {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -         		-
        $43.07
        -         		-
        +$4.20 (4%)
        -
        -
        - - - - -
        -
        Fb
        -
        Meta Inc.
        -
        -
        -         		-
        903.71B
        -         		- {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -         		-
        $324.81
        -         		-
        +$12.20 (3.7%)
        -
        -
        - - - - -
        -
        Googl
        -
        Alphabet Inc.
        -
        -
        -         		-
        1.70T
        -         		- {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -         		-
        $2,860.96
        -         		-
        -$12.20 (3.7%)
        -
        -
        - - - - -
        -
        Aapl
        -
        Apple Inc.
        -
        -
        -         		-
        2.77T
        -         		- {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -         		-
        $168.55
        -         		-
        +$7.44 (1.4%)
        -
        -
        - - - - -
        -
        Coin
        -
        Coinbase Global Inc.
        -
        -
        -         		-
        50.89B
        -         		- {/* Chart built with Chart.js 3 */} -
        - {/* Change the height attribute to adjust the chart height */} - -
        -         		-
        $236.48
        -         		-
        -$24,30 (6.2%)
        -
        -
        -
        -
        - ); -} - -export default FintechCard14; diff --git a/src/partials/fintech/FintechIntro.jsx b/src/partials/fintech/FintechIntro.jsx deleted file mode 100644 index 76e4f5b..0000000 --- a/src/partials/fintech/FintechIntro.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; - -import UserImage from '../../images/user-64-14.jpg'; -import FintechIcon01 from '../../images/company-icon-01.svg'; -import FintechIcon02 from '../../images/company-icon-02.svg'; -import FintechIcon03 from '../../images/company-icon-03.svg'; -import FintechIcon04 from '../../images/company-icon-04.svg'; - -function FintechIntro() { - return ( -
        -
        -
        - {/* Left side */} -
        - {/* Avatar */} -
        - User -
        - {/* User info */} -
        -
        - Hey Mary ๐Ÿ‘‹, this is your current balance: -
        -
        $47,347.09
        -
        -
        - {/* Right side */} - -
        -
        -
        - ); -} - -export default FintechIntro; diff --git a/src/partials/messages/ChannelMenu.jsx b/src/partials/messages/ChannelMenu.jsx deleted file mode 100644 index 5fb242c..0000000 --- a/src/partials/messages/ChannelMenu.jsx +++ /dev/null @@ -1,108 +0,0 @@ -import React, { useState, useRef, useEffect } from 'react'; -import Transition from '../../utils/Transition'; - -import ChannelImage from '../../images/user-avatar-32.png'; -import ChannelImage01 from '../../images/channel-01.png'; -import ChannelImage02 from '../../images/channel-02.png'; -import ChannelImage03 from '../../images/channel-03.png'; - -function ChannelMenu() { - - const [dropdownOpen, setDropdownOpen] = useState(false); - - const trigger = useRef(null); - const dropdown = useRef(null); - - // close on click outside - useEffect(() => { - const clickHandler = ({ target }) => { - if (!dropdown.current) return; - if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return; - setDropdownOpen(false); - }; - document.addEventListener('click', clickHandler); - return () => document.removeEventListener('click', clickHandler); - }); - - // close if the esc key is pressed - useEffect(() => { - const keyHandler = ({ keyCode }) => { - if (!dropdownOpen || keyCode !== 27) return; - setDropdownOpen(false); - }; - document.addEventListener('keydown', keyHandler); - return () => document.removeEventListener('keydown', keyHandler); - }); - - return ( -
        - - - - -
        - ) -} - -export default ChannelMenu; \ No newline at end of file diff --git a/src/partials/messages/Channels.jsx b/src/partials/messages/Channels.jsx deleted file mode 100644 index 75e3245..0000000 --- a/src/partials/messages/Channels.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; - -function Channels({ - setMsgSidebarOpen -}) { - return ( -
        -
        Channels
        -
          -
        • - -
          • -
        • - -
          • -
        • - -
          • -
        -
        - ) -} - -export default Channels; \ No newline at end of file diff --git a/src/partials/messages/DirectMessages.jsx b/src/partials/messages/DirectMessages.jsx deleted file mode 100644 index 34bb9cb..0000000 --- a/src/partials/messages/DirectMessages.jsx +++ /dev/null @@ -1,106 +0,0 @@ -import React from 'react'; - -import UserImage01 from '../../images/user-32-01.jpg'; -import UserImage02 from '../../images/user-32-02.jpg'; -import UserImage03 from '../../images/user-32-03.jpg'; -import UserImage04 from '../../images/user-32-04.jpg'; -import UserImage05 from '../../images/user-32-05.jpg'; -import UserImage06 from '../../images/user-32-06.jpg'; - -function DirectMessages({ - setMsgSidebarOpen -}) { - return ( -
        -
        Direct messages
        -
          -
        • - -
          • -
        • - -
          • -
        • - -
          • -
        • - -
          • -
        • - -
          • -
        • - -
          • -
        -
        - ) -} - -export default DirectMessages; \ No newline at end of file diff --git a/src/partials/messages/MessagesBody.jsx b/src/partials/messages/MessagesBody.jsx deleted file mode 100644 index 8fc3a85..0000000 --- a/src/partials/messages/MessagesBody.jsx +++ /dev/null @@ -1,128 +0,0 @@ -import React from 'react'; - -import User01 from '../../images/user-40-11.jpg'; -import User02 from '../../images/user-40-12.jpg'; -import ChatImage from '../../images/chat-image.jpg'; - -function MessagesBody() { - return ( -
        - {/* Chat msg */} -
        - User 01 -
        -
        - Can anyone help? I have a question about Acme Professional -
        -
        -
        2:40 PM
        -
        -
        -
        - {/* Chat msg */} -
        - User 02 -
        -
        - Hey Dominik Lamakani ๐Ÿ‘‹
        - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est ๐Ÿ™Œ -
        -
        -
        2:40 PM
        - - - -
        -
        -
        - {/* Chat msg */} -
        - User 01 -
        -
        - Chat - -
        -
        -
        2:48 PM
        -
        -
        -
        - {/* Chat msg */} -
        - User 01 -
        -
        - What do you think? Duis aute irure dolor in reprehenderit ๐Ÿ”ฅ -
        -
        -
        2:48 PM
        -
        -
        -
        - {/* Chat msg */} -
        - User 02 -
        -
        - Sed euismod nisi porta lorem mollis. Tellus elementum sagittis vitae et leo duis. Viverra justo nec ultrices dui.
        - Sed lectus vestibulum mattis ullamcorper velit sed. Ut sem nulla pharetra diam sit amet ๐ŸŽ -
        -
        -
        2:55 PM
        - - - -
        -
        -
        - {/* Date separator */} -
        -
        - Tuesday, 20 January -
        -
        - {/* Chat msg */} -
        - User 02 -
        - -
        -
        10:15 AM
        - - - -
        -
        -
        - {/* Chat msg */} -
        - User 01 -
        -
        - - - - - - - - - - - -
        -
        -
        -
        - ); -} - -export default MessagesBody; diff --git a/src/partials/messages/MessagesFooter.jsx b/src/partials/messages/MessagesFooter.jsx deleted file mode 100644 index e0d4f2b..0000000 --- a/src/partials/messages/MessagesFooter.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -function MessagesFooter() { - return ( -
        -
        - {/* Plus button */} - - {/* Message input */} -
        -
        - - -
        - -
        -
        -
        - ); -} - -export default MessagesFooter; diff --git a/src/partials/messages/MessagesHeader.jsx b/src/partials/messages/MessagesHeader.jsx deleted file mode 100644 index 3e96812..0000000 --- a/src/partials/messages/MessagesHeader.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; - -import User01 from '../../images/user-32-01.jpg'; -import User02 from '../../images/user-32-07.jpg'; - -function MessagesHeader({ - msgSidebarOpen, - setMsgSidebarOpen -}) { - return ( -
        -
        - {/* People */} -
        - {/* Close button */} - - {/* People list */} - -
        - {/* Buttons on the right side */} -
        - - -
        -
        -
        - ); -} - -export default MessagesHeader; diff --git a/src/partials/messages/MessagesSidebar.jsx b/src/partials/messages/MessagesSidebar.jsx deleted file mode 100644 index c4d0f11..0000000 --- a/src/partials/messages/MessagesSidebar.jsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import ChannelMenu from './ChannelMenu'; -import DirectMessages from './DirectMessages'; -import Channels from './Channels'; - -function MessagesSidebar({ - msgSidebarOpen, - setMsgSidebarOpen -}) { - return ( -
        -
        - - {/* #Marketing group */} -
        - {/* Group header */} -
        -
        -
        - {/* Channel menu */} - - {/* Edit button */} - -
        -
        -
        - {/* Group body */} -
        - {/* Search form */} -
        - - - -
        - {/* Direct messages */} - - {/* Channels */} - -
        -
        - -
        -
        - ); -} - -export default MessagesSidebar; diff --git a/src/partials/profile/ProfileTable.jsx b/src/partials/profile/ProfileTable.jsx index a68ff80..f7307f2 100644 --- a/src/partials/profile/ProfileTable.jsx +++ b/src/partials/profile/ProfileTable.jsx @@ -32,8 +32,8 @@ function ProfileTable({ {/* General */}
        0 || 'hidden'}`}>

        General ๐Ÿ–‹๏ธ

        -
        - +
        +
        {generalData.map((data) => { return ( @@ -58,8 +58,8 @@ function ProfileTable({ {/* Nationality */}
        0 || 'hidden'}`}>

        Nationality ๐Ÿ–‹๏ธ

        -
        -
        +
        +
        {nationalityData.map(data => { return ( @@ -84,8 +84,8 @@ function ProfileTable({ {/* Social */}
        0 || 'hidden'}`}>

        Social ๐Ÿ–‹๏ธ

        -
        -
        +
        +
        {socialData.map(data => { return ( @@ -110,8 +110,8 @@ function ProfileTable({ {/* Other */}
        0 || 'hidden'}`}>

        Other ๐Ÿ–‹๏ธ

        -
        -
        +
        +
        {otherData.map(data => { return (