From 713aca03366a6a360107bf2d8a12641e9153e107 Mon Sep 17 00:00:00 2001 From: eylonmiz Date: Sun, 14 May 2023 13:23:38 +0300 Subject: [PATCH] demo video --- .../BigCardsContainer/OverviewCard/index.tsx | 38 ++++++++++ .../RecentSalesCard/index.tsx | 50 +++++++++++++ .../BigCardsContainer/index.tsx | 24 +++++++ .../Header/DashboardNav/index.tsx | 19 +++++ .../Header/TeamSwitcher/index.tsx | 72 +++++++++++++++++++ .../Header/UserNav/index.tsx | 63 ++++++++++++++++ .../AnalyticsDashboard/Header/index.tsx | 36 ++++++++++ .../ActiveNowCard/index.tsx | 30 ++++++++ .../SmallCardsContainer/SalesCard/index.tsx | 27 +++++++ .../SubscriptionsCard/index.tsx | 33 +++++++++ .../TotalRevenueCard/index.tsx | 23 ++++++ .../SmallCardsContainer/index.tsx | 22 ++++++ .../AnalyticsDashboard/SubHeader/index.tsx | 32 +++++++++ .../AnalyticsDashboard/TabNav/index.tsx | 29 ++++++++ .../react-agent/AnalyticsDashboard/demo.tsx | 48 +++++++++++++ .../react-agent/AnalyticsDashboard/index.tsx | 36 ++++++++++ 16 files changed, 582 insertions(+) create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/OverviewCard/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/RecentSalesCard/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/Header/DashboardNav/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/Header/TeamSwitcher/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/Header/UserNav/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/Header/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/ActiveNowCard/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/SalesCard/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/SubscriptionsCard/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/TotalRevenueCard/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/SubHeader/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/TabNav/index.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/demo.tsx create mode 100644 frontend/main/src/react-agent/AnalyticsDashboard/index.tsx diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/OverviewCard/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/OverviewCard/index.tsx new file mode 100644 index 0000000..81aa6c6 --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/OverviewCard/index.tsx @@ -0,0 +1,38 @@ + +import React from 'react'; +import { Recharts, Card, CardContent, CardHeader, CardTitle } from '@react-agent/shadcn-ui'; + +export interface OverviewCardProps { + data: Array<{ name: string; total: number }>; +}; + +const OverviewCard: React.FC = ({ data }) => { + const renderChart = () => ( + + + + `$${value}`} + /> + + + + ); + + return ( + + + Overview + + + {renderChart()} + + + ); +}; + +export default OverviewCard; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/RecentSalesCard/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/RecentSalesCard/index.tsx new file mode 100644 index 0000000..d832723 --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/RecentSalesCard/index.tsx @@ -0,0 +1,50 @@ + +import React from 'react'; +import { + Avatar, + AvatarFallback, + AvatarImage, + Box, + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle +} from '@react-agent/shadcn-ui'; + +interface RecentSale { + imageUrl: string; + fallbackText: string; + description: string; + dateTime: string; +} + +interface RecentSalesCardProps { + recentSales: RecentSale[]; +} + +const RecentSalesCard = ({ recentSales }: RecentSalesCardProps) => { + return ( + + + Recent Sales + + + {recentSales.map((sale, index) => ( + + + + {sale.fallbackText} + +
+
{sale.description}
+ {sale.dateTime} +
+ + ))} + + + ); +}; + +export default RecentSalesCard; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/index.tsx new file mode 100644 index 0000000..8ff20b3 --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/index.tsx @@ -0,0 +1,24 @@ + +import React from 'react'; +import { Box } from '@react-agent/shadcn-ui'; +import OverviewCard, { OverviewCardProps } from './OverviewCard'; +import RecentSalesCard, { RecentSalesCardProps } from './RecentSalesCard'; + +interface BigCardsContainerProps { + overviewCardProps: OverviewCardProps; + recentSalesCardProps: RecentSalesCardProps; +} + +const BigCardsContainer: React.FC = ({ + overviewCardProps, + recentSalesCardProps, +}) => { + return ( + + + + + ); +}; + +export default BigCardsContainer; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/Header/DashboardNav/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/Header/DashboardNav/index.tsx new file mode 100644 index 0000000..260b257 --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/Header/DashboardNav/index.tsx @@ -0,0 +1,19 @@ + +import React from 'react'; +import { NavItems } from '@react-agent/shadcn-ui'; + +export interface DashboardNavProps { + items: { id: number; name: string; link: string }[]; +}; + +const DashboardNav: React.FC = ({ items }) => { + return ( + + ); +}; + +export default DashboardNav; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/Header/TeamSwitcher/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/Header/TeamSwitcher/index.tsx new file mode 100644 index 0000000..3f49adf --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/Header/TeamSwitcher/index.tsx @@ -0,0 +1,72 @@ + +import React from 'react'; +import { + Avatar, + AvatarFallback, + AvatarImage, + Box, + Button, + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, + Input, + Label, + Popover, + PopoverContent, + PopoverTrigger, + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@react-agent/shadcn-ui'; + +export interface TeamSwitcherProps { + teams: Array<{ id: number; name: string; avatar?: string }>; + onTeamChange: (teamId: number) => void; +}; + +const TeamSwitcher: React.FC = ({ teams, onTeamChange }) => { + return ( + + + + + + + {teams.map((team) => ( +
onTeamChange(team.id)} + > + + {team.avatar ? ( + + ) : ( + {team.name.charAt(0)} + )} + + {team.name} +
+ ))} + + + + ); +}; + +export default TeamSwitcher; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/Header/UserNav/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/Header/UserNav/index.tsx new file mode 100644 index 0000000..0391f30 --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/Header/UserNav/index.tsx @@ -0,0 +1,63 @@ + +import React from 'react'; +import { + Avatar, + AvatarFallback, + AvatarImage, + Box, + Button, + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from '@react-agent/shadcn-ui'; + +export interface UserNavProps { + userFullName: string; + userAvatarUrl?: string; + onSettingsClick: () => void; + onLogoutClick: () => void; +}; + +const UserNav = (props: UserNavProps) => { + return ( +
+ + {props.userFullName} + + + + + + + + User options + + + Settings + + + + Logout + + + + + +
+ ); +}; + +export default UserNav; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/Header/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/Header/index.tsx new file mode 100644 index 0000000..3c60bb2 --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/Header/index.tsx @@ -0,0 +1,36 @@ + +import React from 'react'; +import { Box, Input } from '@react-agent/shadcn-ui' +import TeamSwitcher from './TeamSwitcher'; +import DashboardNav from './DashboardNav'; +import UserNav from './UserNav'; + +export interface HeaderProps { + teams: Array<{ id: number; name: string; avatar?: string }>; + onTeamChange: (teamId: number) => void; + userFullName: string; + userAvatarUrl?: string; + onSettingsClick: () => void; + onLogoutClick: () => void; + navItems: { id: number; name: string; link: string }[]; +}; + +const Header = (props: HeaderProps) => { + return ( + + + + + + + + + ); +}; + +export default Header; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/ActiveNowCard/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/ActiveNowCard/index.tsx new file mode 100644 index 0000000..8e371c1 --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/ActiveNowCard/index.tsx @@ -0,0 +1,30 @@ + +import React from 'react'; +import { Box, Card, CardContent, CardHeader, CardTitle, Typography } from '@react-agent/shadcn-ui'; + +export interface ActiveNowCardProps { + totalRevenue: number; + numberOfSubscriptions: number; + salesCount: number; + activeUsers: number; +}; + +const ActiveNowCard: React.FC = ({ totalRevenue, numberOfSubscriptions, salesCount, activeUsers }) => { + return ( + + + Active Now + + + + Total Revenue: {totalRevenue} + Number of Subscriptions: {numberOfSubscriptions} + Sales: {salesCount} + Active Users: {activeUsers} + + + + ); +}; + +export default ActiveNowCard; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/SalesCard/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/SalesCard/index.tsx new file mode 100644 index 0000000..bc758b7 --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/SalesCard/index.tsx @@ -0,0 +1,27 @@ + +import React from 'react'; +import { Box, Card, CardContent, CardHeader, CardTitle } from '@react-agent/shadcn-ui'; + +export interface SalesCardProps { + title: string; + data: number; + unit: string; +} + +const SalesCard: React.FC = ({ title, data, unit }) => { + return ( + + + {title} + + + + {data} + {unit} + + + + ); +}; + +export default SalesCard; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/SubscriptionsCard/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/SubscriptionsCard/index.tsx new file mode 100644 index 0000000..84fe8ff --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/SubscriptionsCard/index.tsx @@ -0,0 +1,33 @@ + +import React from 'react'; +import { Box, Card, CardContent, CardHeader, CardTitle } from '@react-agent/shadcn-ui'; + +export interface SubscriptionsCardProps { + title: string; + totalRevenue: number; + numberOfSubscriptions: number; + sales: number; + activeUsers: number; +}; + +const SubscriptionsCard = (props: SubscriptionsCardProps) => { + const { title, totalRevenue, numberOfSubscriptions, sales, activeUsers } = props; + + return ( + + + {title} + + +
+ Total Revenue: ${totalRevenue} + Number of Subscriptions: {numberOfSubscriptions} + Sales: {sales} + Active Users: {activeUsers} +
+ + + ); +}; + +export default SubscriptionsCard; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/TotalRevenueCard/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/TotalRevenueCard/index.tsx new file mode 100644 index 0000000..221143c --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/TotalRevenueCard/index.tsx @@ -0,0 +1,23 @@ + +import React from 'react'; +import { Box, Card, CardContent, CardHeader, CardTitle } from '@react-agent/shadcn-ui'; + +export interface TotalRevenueCardProps {}; + +const TotalRevenueCard = (props: TotalRevenueCardProps) => { + return ( + + + Total Revenue + + + + {/* Replace the placeholder with the actual total revenue value */} +

$15,230

+ + + + ); +}; + +export default TotalRevenueCard; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/index.tsx new file mode 100644 index 0000000..aba186d --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/SmallCardsContainer/index.tsx @@ -0,0 +1,22 @@ + +import React from 'react'; +import { Box } from '@react-agent/shadcn-ui'; +import TotalRevenueCard from './TotalRevenueCard'; +import SubscriptionsCard from './SubscriptionsCard'; +import SalesCard from './SalesCard'; +import ActiveNowCard from './ActiveNowCard'; + +export interface SmallCardsContainerProps {}; + +const SmallCardsContainer = (props: SmallCardsContainerProps) => { + return ( + + + + + + + ); +}; + +export default SmallCardsContainer; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/SubHeader/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/SubHeader/index.tsx new file mode 100644 index 0000000..e552e84 --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/SubHeader/index.tsx @@ -0,0 +1,32 @@ + +import React, { useState } from 'react'; +import { Box, Button, Calendar, Popover, PopoverContent, PopoverTrigger } from '@react-agent/shadcn-ui' + +export interface SubHeaderProps {}; + +const SubHeader = (props: SubHeaderProps) => { + const [showCalendar, setShowCalendar] = useState(false); + + return ( + +

Analytics Dashboard

+ + + setShowCalendar(false)}> + + + + + + + + + + + + ); +}; + +export default SubHeader; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/TabNav/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/TabNav/index.tsx new file mode 100644 index 0000000..3719770 --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/TabNav/index.tsx @@ -0,0 +1,29 @@ + +import React from 'react'; +import { TabsTrigger, TabsList } from '@react-agent/shadcn-ui' + +export interface TabNavProps { + tabs: Array<{ value: string; label: string }>; + defaultValue: string; + onChange?: (value: string) => void; +}; + +const TabNav: React.FC = ({ tabs, defaultValue, onChange }) => { + return ( +
+ + {tabs.map(tab => ( + onChange && onChange(tab.value)} + > + {tab.label} + + ))} + +
+ ); +}; + +export default TabNav; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/demo.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/demo.tsx new file mode 100644 index 0000000..4563c15 --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/demo.tsx @@ -0,0 +1,48 @@ + +import React from 'react'; +import AnalyticsDashboardPage from './AnalyticsDashboardPage'; + +const demoData = [ + { name: 'Product 1', total: 1200 }, + { name: 'Product 2', total: 500 }, + { name: 'Product 3', total: 800 }, +]; + +const demoNavItems = [ + { id: 1, name: 'Dashboard', link: '/' }, + { id: 2, name: 'Analytics', link: '/analytics' }, +]; + +const demoTeams = [ + { id: 1, name: 'Team A', avatar: 'https://via.placeholder.com/40' }, + { id: 2, name: 'Team B', avatar: 'https://via.placeholder.com/40' }, +]; + +const handleTeamChange = (teamId: number) => { + console.log(`Switched to Team: ${teamId}`); +}; + +const handleSettingsClick = () => { + console.log('Settings Clicked'); +}; + +const handleLogoutClick = () => { + console.log('Logout Clicked'); +}; + +const AnalyticsDashboardPageDemo = () => { + return ( + + ); +}; + +export default AnalyticsDashboardPageDemo; diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/index.tsx b/frontend/main/src/react-agent/AnalyticsDashboard/index.tsx new file mode 100644 index 0000000..193ff79 --- /dev/null +++ b/frontend/main/src/react-agent/AnalyticsDashboard/index.tsx @@ -0,0 +1,36 @@ + +import React from 'react'; +import { Box, Tabs, TabsContent } from '@react-agent/shadcn-ui'; +import Header from './Header'; +import SubHeader from './SubHeader'; +import TabNav from './TabNav'; +import SmallCardsContainer from './SmallCardsContainer'; +import BigCardsContainer from './BigCardsContainer'; + +export interface AnalyticsDashboardPageProps {}; + +const AnalyticsDashboardPage = (props: AnalyticsDashboardPageProps) => { + return ( + +
+ + + + + + + + + {/* Another set of components for recent sales */} + + + + ); +}; + +export default AnalyticsDashboardPage;