eylonmiz · eylonmiz · May 14, 2023
diff --git a/frontend/main/src/react-agent/AnalyticsDashboard/BigCardsContainer/OverviewCard/index.tsx 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<OverviewCardProps> = ({ data }) => {
+  const renderChart = () => (
+    <Recharts.ResponsiveContainer width="100%" height={250}>
+      <Recharts.BarChart data={data}>
+        <Recharts.XAxis dataKey="name" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
+        <Recharts.YAxis
+          stroke="#888888"
+          fontSize={12}
+          tickLine={false}
+          axisLine={false}
+          tickFormatter={(value) => `$${value}`}
+        />
+        <Recharts.Bar dataKey="total" fill="#adfa1d" radius={[4, 4, 0, 0]} />
+      </Recharts.BarChart>
+    </Recharts.ResponsiveContainer>
+  );
+
+  return (
+    <Card className="col-span-4 p-4 rounded-lg border bg-card text-card-foreground shadow-sm">
+      <CardHeader>
+        <CardTitle>Overview</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {renderChart()}
+      </CardContent>
+    </Card>
+  );
+};
+
+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
@@ -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 (
+    <Card className="col-span-3 p-4 rounded-lg border bg-card text-card-foreground shadow-sm">
+      <CardHeader>
+        <CardTitle className="w-40 h-8 mb-4">Recent Sales</CardTitle>
+      </CardHeader>
+      <CardContent className="w-full h-80 overflow-y-auto">
+        {recentSales.map((sale, index) => (
+          <Box key={index} className="flex items-center space-x-4 mb-4">
+            <Avatar>
+              <AvatarImage src={sale.imageUrl} alt={sale.description} />
+              <AvatarFallback>{sale.fallbackText}</AvatarFallback>
+            </Avatar>
+            <div className="text-sm">
+              <div>{sale.description}</div>
+              <CardDescription className="text-muted">{sale.dateTime}</CardDescription>
+            </div>
+          </Box>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};
+
+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
@@ -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<BigCardsContainerProps> = ({
+  overviewCardProps,
+  recentSalesCardProps,
+}) => {
+  return (
+    <Box className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+      <OverviewCard {...overviewCardProps} />
+      <RecentSalesCard {...recentSalesCardProps} />
+    </Box>
+  );
+};
+
+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
@@ -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<DashboardNavProps> = ({ items }) => {
+  return (
+    <nav className='flex items-center space-x-4 lg:space-x-6 mx-6'>
+      {items.map(({ id, name, link }) => (
+        <NavItems key={id} name={name} link={link} />
+      ))}
+    </nav>
+  );
+};
+
+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
@@ -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<TeamSwitcherProps> = ({ teams, onTeamChange }) => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button className="h-8 w-40 bg-white text-black border border-gray-300 rounded cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400">
+          Choose Team
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="mt-2 w-64">
+        <Box className="p-4 bg-white rounded-lg shadow-md text-gray-700">
+          {teams.map((team) => (
+            <div
+              key={team.id}
+              className="flex items-center space-x-2 mb-2 cursor-pointer"
+              onClick={() => onTeamChange(team.id)}
+            >
+              <Avatar>
+                {team.avatar ? (
+                  <AvatarImage src={team.avatar} alt={team.name} />
+                ) : (
+                  <AvatarFallback>{team.name.charAt(0)}</AvatarFallback>
+                )}
+              </Avatar>
+              <span>{team.name}</span>
+            </div>
+          ))}
+        </Box>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+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
@@ -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 (
+    <div className="flex items-center">
+      <Box className="mr-4">
+        {props.userFullName}
+      </Box>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button className="relative h-8 w-8 rounded-full">
+            <Avatar>
+              {props.userAvatarUrl ? (
+                <AvatarImage src={props.userAvatarUrl} alt={props.userFullName} />
+              ) : (
+                <AvatarFallback>{props.userFullName.charAt(0)}</AvatarFallback>
+              )}
+            </Avatar>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>User options</DropdownMenuLabel>
+            <DropdownMenuItem onSelect={props.onSettingsClick}>
+              <DropdownMenuShortcut title="Settings" />
+              Settings
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={props.onLogoutClick}>
+              <DropdownMenuShortcut title="Logout" />
+              Logout
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+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
@@ -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 (
+    <Box className="flex h-16 items-center px-4 border-b">
+      <TeamSwitcher teams={props.teams} onTeamChange={props.onTeamChange} />
+      <DashboardNav items={props.navItems} />
+      <Box className="ml-auto flex items-center space-x-4">
+        <Input type="search" placeholder="Search" className="h-9 md:w-[100px] lg:w-[300px]" />
+        <UserNav
+          userFullName={props.userFullName}
+          userAvatarUrl={props.userAvatarUrl}
+          onSettingsClick={props.onSettingsClick}
+          onLogoutClick={props.onLogoutClick}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+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
@@ -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<ActiveNowCardProps> = ({ totalRevenue, numberOfSubscriptions, salesCount, activeUsers }) => {
+  return (
+    <Card className="p-4 rounded-lg border bg-card text-card-foreground shadow-sm">
+      <CardHeader>
+        <CardTitle className="text-lg font-semibold leading-none tracking-tight">Active Now</CardTitle>
+      </CardHeader>
+      <CardContent className="h-24">
+        <Typography>
+          <Box>Total Revenue: {totalRevenue}</Box>
+          <Box>Number of Subscriptions: {numberOfSubscriptions}</Box>
+          <Box>Sales: {salesCount}</Box>
+          <Box>Active Users: {activeUsers}</Box>
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+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
@@ -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<SalesCardProps> = ({ title, data, unit }) => {
+  return (
+    <Card className="p-4 rounded-lg border bg-card text-card-foreground shadow-sm">
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="h-24 flex items-center justify-center">
+        <Box>
+          <span className="text-2xl font-semibold">{data}</span>
+          <span className="text-sm text-gray-500 ml-2">{unit}</span>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default SalesCard;