From 4a999c5f8141782cd601084b71e895e71f632389 Mon Sep 17 00:00:00 2001 From: gorbenco03 Date: Wed, 3 Apr 2024 02:55:58 +0300 Subject: [PATCH] dashboard --- pages/dashboard.tsx | 680 +++++++++++++++++++++++++++++++++++ sections/details/details.tsx | 10 +- 2 files changed, 688 insertions(+), 2 deletions(-) create mode 100644 pages/dashboard.tsx diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx new file mode 100644 index 0000000..07f667c --- /dev/null +++ b/pages/dashboard.tsx @@ -0,0 +1,680 @@ +/* + This example requires some changes to your config: + + ``` + // tailwind.config.js + module.exports = { + // ... + plugins: [ + // ... + require('@tailwindcss/forms'), + ], + } + ``` +*/ +import { Fragment, useState } from 'react'; +import { Dialog, Menu, Transition } from '@headlessui/react'; +import { + Bars3CenterLeftIcon, + BellIcon, + ClockIcon, + CogIcon, + CreditCardIcon, + DocumentChartBarIcon, + HomeIcon, + QuestionMarkCircleIcon, + ScaleIcon, + ShieldCheckIcon, + UserGroupIcon, + XMarkIcon, +} from '@heroicons/react/24/outline'; +import { + BanknotesIcon, + BuildingOfficeIcon, + CheckCircleIcon, + ChevronDownIcon, + ChevronRightIcon, + MagnifyingGlassIcon, +} from '@heroicons/react/20/solid'; + +const navigation = [ + { name: 'Home', href: '#', icon: HomeIcon, current: true }, + { name: 'History', href: '#', icon: ClockIcon, current: false }, + { name: 'Balances', href: '#', icon: ScaleIcon, current: false }, + { name: 'Cards', href: '#', icon: CreditCardIcon, current: false }, + { name: 'Recipients', href: '#', icon: UserGroupIcon, current: false }, + { name: 'Reports', href: '#', icon: DocumentChartBarIcon, current: false }, +]; +const secondaryNavigation = [ + { name: 'Settings', href: '#', icon: CogIcon }, + { name: 'Help', href: '#', icon: QuestionMarkCircleIcon }, + { name: 'Privacy', href: '#', icon: ShieldCheckIcon }, +]; +const cards = [ + { name: 'Account balance', href: '#', icon: ScaleIcon, amount: '$30,659.45' }, + // More items... +]; +const transactions = [ + { + id: 1, + name: 'Payment to Molly Sanders', + href: '#', + amount: '$20,000', + currency: 'USD', + status: 'success', + date: 'July 11, 2020', + datetime: '2020-07-11', + }, + // More transactions... +]; +const statusStyles = { + success: 'bg-green-100 text-green-800', + processing: 'bg-yellow-100 text-yellow-800', + failed: 'bg-gray-100 text-gray-800', +}; + +function classNames(...classes) { + return classes.filter(Boolean).join(' '); +} + +export default function Example() { + const [sidebarOpen, setSidebarOpen] = useState(false); + + return ( + <> + {/* + This example requires updating your template: + + ``` + + + ``` + */} +
+ + + +
+ + +
+ + + +
+ +
+ +
+ Easywire logo +
+ + + + +
+
+ + + {/* Static sidebar for desktop */} +
+ {/* Sidebar component, swap this element with another sidebar if you like */} +
+
+ Easywire logo +
+ +
+
+ +
+
+ + {/* Search bar */} +
+
+
+ +
+ + +
+
+
+
+ + + {/* Profile dropdown */} + +
+ + + + + Open user menu for + Emilia Birch + + +
+ + + + {({ active }) => ( + + Your Profile + + )} + + + {({ active }) => ( + + Settings + + )} + + + {({ active }) => ( + + Logout + + )} + + + + +
+
+
+
+ {/* Page header */} +
+
+
+
+ {/* Profile */} +
+ +
+
+ +

+ Good morning, Emilia Birch +

+
+
+
Company
+
+
+
Account status
+
+
+
+
+
+
+
+ + +
+
+
+
+ +
+
+

+ Overview +

+
+ {/* Card */} + {cards.map((card) => ( +
+
+
+
+
+
+
+
+ {card.name} +
+
+
+ {card.amount} +
+
+
+
+
+
+ +
+ ))} +
+
+ +

+ Recent activity +

+ + {/* Activity list (smallest breakpoint only) */} + + + {/* Activity table (small breakpoint and up) */} +
+
+
+
+ + + + + + + + + + + {transactions.map((transaction) => ( + + + + + + + ))} + +
+ Transaction + + Amount + + Status + + Date +
+ + + + {transaction.amount} + + {transaction.currency} + + + {transaction.status} + + + +
+ {/* Pagination */} + +
+
+
+
+
+
+
+
+ + ); +} diff --git a/sections/details/details.tsx b/sections/details/details.tsx index 81c9d4c..cd3a236 100644 --- a/sections/details/details.tsx +++ b/sections/details/details.tsx @@ -181,7 +181,10 @@ const Details: React.FC = () => {
-

Informații Șofer

+

+ Informații Sofer +

+
{driverFields.map((field) => (
@@ -204,7 +207,10 @@ const Details: React.FC = () => {
))}
-

Informații Mașină

+

+ Informații Mașină +

+
{carFields.map((field) => (