-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
mukilan2815
committed
Jun 26, 2024
1 parent
63f6d54
commit 2141d58
Showing
10 changed files
with
648 additions
and
53 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,9 @@ | ||
| import React from "react"; | ||
| import React from 'react' | ||
|
|
||
| const AdminAO = () => { | ||
| return <div>AdminAO</div>; | ||
| }; | ||
| return ( | ||
| <div>AdminAO</div> | ||
| ) | ||
| } | ||
|
|
||
| export default AdminAO; | ||
| export default AdminAO |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import { Bar, Doughnut, Line, Pie } from "react-chartjs-2"; | ||
| import { | ||
| Chart as ChartJS, | ||
| ArcElement, | ||
| CategoryScale, | ||
| LinearScale, | ||
| BarElement, | ||
| LineElement, | ||
| PointElement, | ||
| Title, | ||
| Tooltip, | ||
| Legend, | ||
| } from "chart.js"; | ||
| import "react-chatbot-kit/build/main.css"; | ||
|
|
||
| ChartJS.register( | ||
| ArcElement, | ||
| CategoryScale, | ||
| LinearScale, | ||
| BarElement, | ||
| LineElement, | ||
| PointElement, | ||
| Title, | ||
| Tooltip, | ||
| Legend | ||
| ); | ||
|
|
||
| const Dashboard = () => { | ||
| const [formData, setFormData] = useState(null); | ||
| const [selectedChart, setSelectedChart] = useState("bar"); | ||
|
|
||
| useEffect(() => { | ||
| const storedFormData = JSON.parse(localStorage.getItem("completeFormData")); | ||
| setFormData(storedFormData); | ||
| }, []); | ||
|
|
||
| if (!formData) { | ||
| return <div>Loading...</div>; | ||
| } | ||
|
|
||
| const chartTypes = ["bar", "line", "pie", "doughnut"]; | ||
|
|
||
| const chartComponents = { | ||
| bar: Bar, | ||
| line: Line, | ||
| pie: Pie, | ||
| doughnut: Doughnut, | ||
| }; | ||
|
|
||
| const ChartComponent = chartComponents[selectedChart]; | ||
|
|
||
| const getChartData = (data, labels, title) => ({ | ||
| labels, | ||
| datasets: [ | ||
| { | ||
| label: title, | ||
| data, | ||
| backgroundColor: [ | ||
| "#FF6384", | ||
| "#36A2EB", | ||
| "#FFCE56", | ||
| "#4BC0C0", | ||
| "#9966FF", | ||
| "#FF9F40", | ||
| "#FF6384", | ||
| "#36A2EB", | ||
| "#FFCE56", | ||
| "#4BC0C0", | ||
| ], | ||
| borderColor: "rgba(75, 192, 192, 1)", | ||
| borderWidth: 1, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| const chartOptions = { | ||
| responsive: true, | ||
| maintainAspectRatio: false, | ||
| scales: { | ||
| y: { | ||
| beginAtZero: true, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| const charts = [ | ||
| { | ||
| title: "Constitution", | ||
| data: getChartData( | ||
| Object.values(formData.constitution).map((v) => (v ? 1 : 0)), | ||
| Object.keys(formData.constitution), | ||
| "Constitution" | ||
| ), | ||
| }, | ||
| { | ||
| title: "Industry Classification", | ||
| data: getChartData( | ||
| Object.values(formData.industryClassification).map((v) => (v ? 1 : 0)), | ||
| Object.keys(formData.industryClassification), | ||
| "Industry Classification" | ||
| ), | ||
| }, | ||
| { | ||
| title: "Annual Turnover", | ||
| data: getChartData( | ||
| Object.values(formData.annualTurnover).map((v) => parseFloat(v) || 0), | ||
| Object.keys(formData.annualTurnover), | ||
| "Annual Turnover" | ||
| ), | ||
| }, | ||
| { | ||
| title: "Employment Details", | ||
| data: getChartData( | ||
| Object.values(formData.employmentDetails).map((v) => parseInt(v) || 0), | ||
| Object.keys(formData.employmentDetails), | ||
| "Employment Details" | ||
| ), | ||
| }, | ||
| { | ||
| title: "Market Catering", | ||
| data: getChartData( | ||
| [ | ||
| formData.marketCatering.domestic ? 1 : 0, | ||
| formData.marketCatering.global ? 1 : 0, | ||
| formData.marketCatering.both ? 1 : 0, | ||
| parseFloat(formData.marketCatering.percentExports) || 0, | ||
| parseFloat(formData.marketCatering.percentImports) || 0, | ||
| ], | ||
| ["Domestic", "Global", "Both", "% Exports", "% Imports"], | ||
| "Market Catering" | ||
| ), | ||
| }, | ||
| { | ||
| title: "Welfare Obligations", | ||
| data: getChartData( | ||
| Object.values(formData.welfareObligations).map( | ||
| (v) => parseFloat(v) || 0 | ||
| ), | ||
| Object.keys(formData.welfareObligations), | ||
| "Welfare Obligations" | ||
| ), | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <div className="bg-gray-100 p-6"> | ||
| <h1 className="flex items-center justify-center font-bold text-4xl mb-10"> | ||
| Dashboard | ||
| </h1> | ||
| <div className="mb-4"> | ||
| <label htmlFor="chartType" className="mr-2"> | ||
| Select Chart Type: | ||
| </label> | ||
| <select | ||
| id="chartType" | ||
| value={selectedChart} | ||
| onChange={(e) => setSelectedChart(e.target.value)} | ||
| className="p-2 border rounded" | ||
| > | ||
| {chartTypes.map((type) => ( | ||
| <option key={type} value={type}> | ||
| {type.charAt(0).toUpperCase() + type.slice(1)} | ||
| </option> | ||
| ))} | ||
| </select> | ||
| </div> | ||
| <div className="grid grid-cols-2 gap-6"> | ||
| {charts.map((chart, index) => ( | ||
| <div key={index} className="bg-white rounded-lg shadow-md p-4"> | ||
| <h3 className="text-lg font-semibold mb-4">{chart.title}</h3> | ||
| <div className="h-64"> | ||
| <ChartComponent data={chart.data} options={chartOptions} /> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Dashboard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import React from "react"; | ||
| import icci from "../../Assets/icci.jpg"; | ||
| const Navbar = () => { | ||
| return ( | ||
| <nav class="bg-white border-gray-200 dark:bg-gray-900"> | ||
| <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> | ||
| <a | ||
| href="https://iccicbe.com/" | ||
| class="flex items-center space-x-3 rtl:space-x-reverse" | ||
| > | ||
| <img src={icci} class="h-16" alt="Flowbite Logo" /> | ||
| </a> | ||
| <button | ||
| data-collapse-toggle="navbar-default" | ||
| type="button" | ||
| class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" | ||
| aria-controls="navbar-default" | ||
| aria-expanded="false" | ||
| > | ||
| <span class="sr-only">Open main menu</span> | ||
| <svg | ||
| class="w-5 h-5" | ||
| aria-hidden="true" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 17 14" | ||
| > | ||
| <path | ||
| stroke="currentColor" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="2" | ||
| d="M1 1h15M1 7h15M1 13h15" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| <div class="hidden w-full md:block md:w-auto" id="navbar-default"> | ||
| <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"> | ||
| <li> | ||
| <a | ||
| href="/admin" | ||
| class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" | ||
| aria-current="page" | ||
| > | ||
| Home | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="/table" | ||
| class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" | ||
| > | ||
| Admin | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="/analysis" | ||
| class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" | ||
| > | ||
| Analysis | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| ); | ||
| }; | ||
|
|
||
| export default Navbar; |
Oops, something went wrong.