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
1 parent
0643d85
commit 21063b0
There are no files selected for viewing
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,96 @@ | ||
| import React from 'react'; | ||
| import { Doughnut } from 'react-chartjs-2'; | ||
| import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'; | ||
|
|
||
| ChartJS.register(ArcElement, Tooltip, Legend); | ||
|
|
||
| // eslint-disable-next-line react/function-component-definition | ||
| const PieChart: React.FC = () => { | ||
| const data = { | ||
| labels: ['new pie chart'], | ||
| datasets: [ | ||
| { | ||
| label: 'rates', | ||
| data: [30, 100], | ||
| backgroundColor: ['#4F46E5', '#A5B4FC'], | ||
| hoverOffset: 4, | ||
| }, | ||
| ], | ||
| }; | ||
| const data2 = { | ||
| labels: ['new pie chart'], | ||
| datasets: [ | ||
| { | ||
| label: 'rates', | ||
| data: [30, 70], | ||
| backgroundColor: ['#4F46E5', '#A5B4FC'], | ||
| hoverOffset: 4, | ||
| }, | ||
| ], | ||
| }; | ||
| const data3 = { | ||
| labels: ['new pie chart'], | ||
| datasets: [ | ||
| { | ||
| label: 'rates', | ||
| data: [60, 60], | ||
| backgroundColor: ['#4F46E5', '#A5B4FC'], | ||
| hoverOffset: 4, | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| const options = { | ||
| responsive: true, | ||
| cutout: '70%', | ||
| plugins: { | ||
| tooltip: { | ||
| callbacks: { | ||
| // eslint-disable-next-line func-names, object-shorthand | ||
| label: function (tooltipItem: any) { | ||
| return `${tooltipItem.label}: ${tooltipItem.raw}%`; | ||
| }, | ||
| }, | ||
| }, | ||
| legend: { | ||
| display: false, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex flex-col items-center -ml-8 mb-8"> | ||
| <div className="flex space-x-8"> | ||
| <div className="relative w-[200px] h-[200px] bg-red-200 p-2 rounded"> | ||
| <Doughnut data={data} options={options} /> | ||
| <div className="absolute inset-0 flex items-center justify-center"> | ||
| <div className="text-center"> | ||
| <p className="text-2xl font-semibold text-gray-500">10</p> | ||
| </div> | ||
| </div> | ||
| <p className="text-center mt-2">New Invitations & Registration</p> | ||
| </div> | ||
| <div className="relative w-[200px] h-[200px] bg-green-200 p-2 rounded"> | ||
| <Doughnut data={data2} options={options} /> | ||
| <div className="absolute inset-0 flex items-center justify-center"> | ||
| <div className="text-center"> | ||
| <p className="text-2xl font-semibold text-gray-500">20</p> | ||
| </div> | ||
| </div> | ||
| <p className="text-center mt-2">Upcoming Events</p> | ||
| </div> | ||
| <div className="relative w-[200px] h-[200px] bg-yellow-200 p-2 rounded"> | ||
| <Doughnut data={data3} options={options} /> | ||
| <div className="absolute inset-0 flex items-center justify-center"> | ||
| <div className="text-center"> | ||
| <p className="text-2xl font-semibold text-gray-500">50</p> | ||
| </div> | ||
| </div> | ||
| <p className="text-center mt-2">Active& Progressive Tickets</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PieChart; |
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,103 @@ | ||
| import React from 'react'; | ||
| import { FaEye } from 'react-icons/fa'; | ||
|
|
||
| const DashboardTableDesign = () => { | ||
| const dummyData = [ | ||
| { team: 'Nova', logins: '2.4k', users: 45 }, | ||
| { team: 'Fighters', logins: '1.8k', users: 32 }, | ||
| { team: 'Bitcrafters', logins: '1.2k', users: 28}, | ||
| { team: 'Team1', logins: '3.1k', users: 52 }, | ||
| { team: 'Team2', logins: '0.9k', users: 19 }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <div className="w-full max-w-7xl mx-auto px-6 space-y-4"> | ||
| <div className="flex justify-between items-center mb-6"> | ||
| <h2 className="text-xl font-semibold text-gray-200">Team Analytics</h2> | ||
| <div className="flex gap-3"> | ||
| <input | ||
| type="search" | ||
| placeholder="Search teams..." | ||
| className="px-4 py-2 bg-gray-700 rounded-lg text-sm text-gray-200 border border-gray-600 focus:outline-none focus:border-blue-500" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="bg-gray-800 rounded-xl shadow-xl overflow-hidden border border-gray-700"> | ||
| <div className="overflow-x-auto"> | ||
| <table className="w-full table-fixed"> | ||
| <thead> | ||
| <tr className="bg-gray-900"> | ||
| <th className="w-[30%] px-6 py-4 text-left"> | ||
| <div className="flex items-center gap-2 text-sm font-semibold text-gray-300"> | ||
| Team Name | ||
| </div> | ||
| </th> | ||
| <th className="w-[25%] px-6 py-4 text-left"> | ||
| <div className="flex items-center gap-2 text-sm font-semibold text-gray-300"> | ||
| Logins | ||
| </div> | ||
| </th> | ||
| <th className="w-[25%] px-6 py-4 text-left"> | ||
| <div className="flex items-center gap-2 text-sm font-semibold text-gray-300"> | ||
| Users | ||
| </div> | ||
| </th> | ||
| <th className="w-[20%] px-10 py-4 text-left"> | ||
| <div className="flex items-center gap-2 text-sm font-semibold text-gray-300"> | ||
| Actions | ||
| </div> | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {dummyData.map((row, index) => ( | ||
| <tr | ||
| key={index} | ||
| className="border-t border-gray-700 hover:bg-gray-700/50 transition-colors" | ||
| > | ||
| <td className="px-6 py-4"> | ||
| <div className="flex items-center gap-3"> | ||
| <div className="w-2 h-2 rounded-full bg-blue-500"></div> | ||
| <span className="text-gray-200 font-medium">{row.team}</span> | ||
| </div> | ||
| </td> | ||
| <td className="px-6 py-4"> | ||
| <div className="text-gray-300">{row.logins}</div> | ||
| </td> | ||
| <td className="px-6 py-4"> | ||
| <div className="inline-flex items-center px-3 py-1 rounded-full bg-gray-700 text-gray-300"> | ||
| {row.users} | ||
| </div> | ||
| </td> | ||
| <td className="px-6 py-4"> | ||
| <button className="flex items-center justify-center gap-2 px-4 py-2 text-sm text-blue-400 bg-blue-500/10 rounded-full hover:bg-blue-500/20 transition-colors"> | ||
| <FaEye className="text-xs" /> | ||
| View | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
| <div className="px-6 py-4 bg-gray-900 border-t border-gray-700 flex items-center justify-between"> | ||
| <div className="text-sm text-gray-400"> | ||
| Showing 5 of 12 teams | ||
| </div> | ||
| <div className="flex gap-2"> | ||
| <button className="px-4 py-2 text-sm text-gray-300 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors"> | ||
| Previous | ||
| </button> | ||
| <button className="px-4 py-2 text-sm text-gray-300 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors"> | ||
| Next | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DashboardTableDesign; | ||
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