-
Notifications
You must be signed in to change notification settings - Fork 68
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #283 from ShivanshPlays/adminDashboard
- Loading branch information
Showing
5 changed files
with
295 additions
and
6 deletions.
There are no files selected for viewing
36 changes: 36 additions & 0 deletions
36
alimento-nextjs/app/admin/[adminId]/components/overview.tsx
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,36 @@ | ||
| "use client"; | ||
| import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"; | ||
|
|
||
| interface graphData{ | ||
| name:string, | ||
| total:number | ||
| } | ||
| interface OverviewProps { | ||
| data:graphData[] | ||
| } | ||
|
|
||
| const Overview: React.FC<OverviewProps> = ({ data }) => { | ||
| return ( | ||
| <ResponsiveContainer width="100%" height={350}> | ||
| <BarChart data={data}> | ||
| <XAxis | ||
| dataKey={"name"} | ||
| stroke="#888888" | ||
| fontSize={12} | ||
| tickLine={false} | ||
| axisLine={false} | ||
| /> | ||
| <YAxis | ||
| stroke="#888888" | ||
| fontSize={12} | ||
| tickLine={false} | ||
| axisLine={false} | ||
| tickFormatter={(value) => `₹${value}`} | ||
| /> | ||
| <Bar dataKey="total" fill="#5a64f2" radius={[4, 4, 0, 0]} /> | ||
| </BarChart> | ||
| </ResponsiveContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default Overview; |
82 changes: 82 additions & 0 deletions
82
alimento-nextjs/app/admin/[adminId]/components/recentSales.tsx
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,82 @@ | ||
| import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; | ||
|
|
||
| interface Listing { | ||
| name: string; | ||
| email: string; | ||
| avatarSrc: string; | ||
| avatarText: string; | ||
| amount: number; // Price for a dish or restaurant | ||
| listingType: string; // Restaurant or Dish type | ||
| } | ||
|
|
||
| const listingsData: Listing[] = [ | ||
| { | ||
| name: "Tandoori Delights", | ||
| email: "[email protected]", | ||
| avatarSrc: "/avatars/tandoori.png", | ||
| avatarText: "TD", | ||
| amount: 300.0, | ||
| listingType: "Restaurant - Indian Cuisine", | ||
| }, | ||
| { | ||
| name: "Pasta Mania", | ||
| email: "[email protected]", | ||
| avatarSrc: "/avatars/pasta.png", | ||
| avatarText: "PM", | ||
| amount: 250.0, | ||
| listingType: "Restaurant - Italian Cuisine", | ||
| }, | ||
| { | ||
| name: "Sushi World", | ||
| email: "[email protected]", | ||
| avatarSrc: "/avatars/sushi.png", | ||
| avatarText: "SW", | ||
| amount: 450.0, | ||
| listingType: "Restaurant - Japanese Cuisine", | ||
| }, | ||
| { | ||
| name: "Burger Shack", | ||
| email: "[email protected]", | ||
| avatarSrc: "/avatars/burger.png", | ||
| avatarText: "BS", | ||
| amount: 120.0, | ||
| listingType: "Restaurant - Fast Food", | ||
| }, | ||
| { | ||
| name: "Vegan Bites", | ||
| email: "[email protected]", | ||
| avatarSrc: "/avatars/vegan.png", | ||
| avatarText: "VB", | ||
| amount: 180.0, | ||
| listingType: "Restaurant - Vegan", | ||
| }, | ||
| ]; | ||
|
|
||
| export function RecentSales() { | ||
| return ( | ||
| <div className="space-y-8 flex items-center justify-center flex-col"> | ||
| {listingsData.map((listing, index) => ( | ||
| <div className="flex items-center w-full lg:w-3/4 bg-gray-200 dark:bg-gray-700 p-2 rounded-xl" key={index}> | ||
| <Avatar className="h-9 w-9"> | ||
| <AvatarImage src={listing.avatarSrc} alt={listing.name} /> | ||
| <AvatarFallback>{listing.avatarText}</AvatarFallback> | ||
| </Avatar> | ||
| <div className="grid grid-cols-1 gap-2 lg:grid-cols-2"> | ||
| <div className="ml-4 space-y-1 p-2 col-span-1"> | ||
| <p className="text-sm font-medium leading-none">{listing.name}</p> | ||
| <p className="text-sm text-muted-foreground">{listing.email}</p> | ||
| </div> | ||
| <div className="ml-4 space-y-1 p-2 col-span-1"> | ||
| <div className="ml-auto text-sm font-medium"> | ||
| ₹{listing.amount.toLocaleString()} | ||
| </div> | ||
| <p className="ml-auto text-sm text-muted-foreground"> | ||
| {listing.listingType} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } |
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,126 @@ | ||
| const AdminPage = () => { | ||
| return ( | ||
| <div>hiiii</div> | ||
| ); | ||
|
|
||
| import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; | ||
| import { Heading } from "@/components/ui/heading"; | ||
| import { Separator } from "@/components/ui/separator"; | ||
| import { Activity, CreditCard, IndianRupee, Package, Store, User } from "lucide-react"; | ||
| import { RecentSales } from "./components/recentSales"; | ||
| import Overview from "./components/overview"; | ||
|
|
||
| interface AdminPageProps { | ||
| params: { storeId: string }; | ||
| } | ||
|
|
||
| export default AdminPage; | ||
|
|
||
| const mockGraphData = [ | ||
| { name: "Jan", total: 5000 }, | ||
| { name: "Feb", total: 4500 }, | ||
| { name: "Mar", total: 6000 }, | ||
| { name: "Apr", total: 5500 }, | ||
| { name: "May", total: 7000 }, | ||
| { name: "Jun", total: 8000 }, | ||
| { name: "Jul", total: 7500 }, | ||
| { name: "Aug", total: 7000 }, | ||
| { name: "Sep", total: 8500 }, | ||
| { name: "Oct", total: 9000 }, | ||
| { name: "Nov", total: 9500 }, | ||
| { name: "Dec", total: 10000 }, | ||
| ]; | ||
|
|
||
| const AdminPage: React.FC<AdminPageProps> = async () => { | ||
|
|
||
| return ( | ||
| <div className="flex-col"> | ||
| <div className="flex-1 space-y-4 p-8 pt-6"> | ||
| <Heading title="Alimento Dashboard" description="Overview of the website" /> | ||
| <Separator /> | ||
| <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> | ||
| <Card className="bg-gray-200 dark:bg-gray-700"> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> | ||
| <CardTitle className="text-sm font-medium"> | ||
| Total Revenue | ||
| </CardTitle> | ||
|
|
||
| <IndianRupee className="h-4 w-4 text-muted-foreground" /> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <div className="text-2xl font-bold"> | ||
| ₹ 2,10,789 | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| <Card className="bg-gray-200 dark:bg-gray-700"> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> | ||
| <CardTitle className="text-sm font-medium">Sales</CardTitle> | ||
|
|
||
| <CreditCard className="h-4 w-4 text-muted-foreground" /> | ||
| </CardHeader> | ||
| <CardContent> | ||
| +577 | ||
| </CardContent> | ||
| </Card> | ||
| <Card className="bg-gray-200 dark:bg-gray-700"> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> | ||
| <CardTitle className="text-sm font-medium"> | ||
| Sellers Associated | ||
| </CardTitle> | ||
|
|
||
| <Store className="h-4 w-4 text-muted-foreground" /> | ||
| </CardHeader> | ||
| <CardContent> | ||
| 43 | ||
| </CardContent> | ||
| </Card> | ||
| <Card className="bg-gray-200 dark:bg-gray-700"> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> | ||
| <CardTitle className="text-sm font-medium"> | ||
| Customer Associated | ||
| </CardTitle> | ||
|
|
||
| <User className="h-4 w-4 text-muted-foreground" /> | ||
| </CardHeader> | ||
| <CardContent> | ||
| 1450 | ||
| </CardContent> | ||
| </Card> | ||
| <Card className="bg-gray-200 dark:bg-gray-700"> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> | ||
| <CardTitle className="text-sm font-medium"> | ||
| Website Visits | ||
| </CardTitle> | ||
|
|
||
| <Activity className="h-4 w-4 text-muted-foreground" /> | ||
| </CardHeader> | ||
| <CardContent> | ||
| 100,223 | ||
| </CardContent> | ||
| </Card> | ||
| <Card className="bg-gray-200 dark:bg-gray-700"> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> | ||
| <CardTitle className="text-sm font-medium"> | ||
| Successful Orders | ||
| </CardTitle> | ||
|
|
||
| <Package className="h-4 w-4 text-muted-foreground" /> | ||
| </CardHeader> | ||
| <CardContent> | ||
| 20455+ | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| <div className="grid grid-cols-1 lg:grid-cols-2 gap-4"> | ||
| <Card className="col-span-1"> | ||
| <CardHeader>Overview</CardHeader> | ||
| <CardContent className="pl-2"> | ||
| <Overview data={mockGraphData} /> | ||
| </CardContent> | ||
| </Card> | ||
| <div className="col-span-1"> | ||
| <Heading title="Some recent figures" description="We have made 114 sales this week!"/> | ||
| <RecentSales /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AdminPage; |
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,50 @@ | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
| import * as AvatarPrimitive from "@radix-ui/react-avatar" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
|
|
||
| const Avatar = React.forwardRef< | ||
| React.ElementRef<typeof AvatarPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> | ||
| >(({ className, ...props }, ref) => ( | ||
| <AvatarPrimitive.Root | ||
| ref={ref} | ||
| className={cn( | ||
| "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| Avatar.displayName = AvatarPrimitive.Root.displayName | ||
|
|
||
| const AvatarImage = React.forwardRef< | ||
| React.ElementRef<typeof AvatarPrimitive.Image>, | ||
| React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> | ||
| >(({ className, ...props }, ref) => ( | ||
| <AvatarPrimitive.Image | ||
| ref={ref} | ||
| className={cn("aspect-square h-full w-full", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| AvatarImage.displayName = AvatarPrimitive.Image.displayName | ||
|
|
||
| const AvatarFallback = React.forwardRef< | ||
| React.ElementRef<typeof AvatarPrimitive.Fallback>, | ||
| React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> | ||
| >(({ className, ...props }, ref) => ( | ||
| <AvatarPrimitive.Fallback | ||
| ref={ref} | ||
| className={cn( | ||
| "flex h-full w-full items-center justify-center rounded-full bg-muted", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName | ||
|
|
||
| export { Avatar, AvatarImage, AvatarFallback } |
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