diff --git a/src/App.tsx b/src/App.tsx index 18daf2e..8ddd871 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,11 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Index from "./pages/Index"; import NotFound from "./pages/NotFound"; +import Layout from "./components/Layout"; +import StockList from "./pages/StockList"; +import BookOut from "./pages/BookOut"; +import Customers from "./pages/Customers"; +import Settings from "./pages/Settings"; const queryClient = new QueryClient(); @@ -15,7 +20,11 @@ const App = () => ( - } /> + } /> + } /> + } /> + } /> + } /> {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} } /> @@ -24,4 +33,4 @@ const App = () => ( ); -export default App; +export default App; \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..1a568c5 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,27 @@ +import { Search } from 'lucide-react'; +import { Input } from '@/components/ui/input'; +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; + +const Header = () => { + return ( +
+

Dashboard

+
+
+ + +
+ + + CN + +
+
+ ); +}; + +export default Header; \ No newline at end of file diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000..31558ba --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import Sidebar from './Sidebar'; +import Header from './Header'; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return ( +
+ +
+
+
+ {children} +
+
+
+ ); +}; + +export default Layout; \ No newline at end of file diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx new file mode 100644 index 0000000..50c6c79 --- /dev/null +++ b/src/components/Sidebar.tsx @@ -0,0 +1,50 @@ +import { NavLink } from 'react-router-dom'; +import { LayoutDashboard, Package, ShoppingCart, Users, Settings, Box } from 'lucide-react'; +import { MadeWithDyad } from './made-with-dyad'; + +const Sidebar = () => { + const navLinkClasses = ({ isActive }: { isActive: boolean }) => + `flex items-center px-4 py-2 rounded-lg transition-colors duration-200 ${ + isActive + ? 'bg-blue-500 text-white' + : 'text-gray-700 hover:bg-gray-200' + }`; + + return ( + + ); +}; + +export default Sidebar; \ No newline at end of file diff --git a/src/components/StatCard.tsx b/src/components/StatCard.tsx new file mode 100644 index 0000000..8285223 --- /dev/null +++ b/src/components/StatCard.tsx @@ -0,0 +1,31 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import React from 'react'; + +interface StatCardProps { + title: string; + value: string; + icon: React.ReactNode; + iconBgColor: string; +} + +const StatCard = ({ title, value, icon, iconBgColor }: StatCardProps) => { + return ( + + + {title} + + +
+
+ {icon} +
+
+
{value}
+
+
+ + + ); +}; + +export default StatCard; \ No newline at end of file diff --git a/src/components/StockActivityChart.tsx b/src/components/StockActivityChart.tsx new file mode 100644 index 0000000..ca29a55 --- /dev/null +++ b/src/components/StockActivityChart.tsx @@ -0,0 +1,37 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'; + +const data = [ + { name: 'Jan', stockIn: 400, stockOut: 240 }, + { name: 'Feb', stockIn: 300, stockOut: 139 }, + { name: 'Mar', stockIn: 200, stockOut: 980 }, + { name: 'Apr', stockIn: 278, stockOut: 390 }, + { name: 'May', stockIn: 189, stockOut: 480 }, + { name: 'Jun', stockIn: 239, stockOut: 380 }, + { name: 'Jul', stockIn: 349, stockOut: 430 }, +]; + +const StockActivityChart = () => { + return ( + + + Monthly Activity + + + + + + + + + + + + + + + + ); +}; + +export default StockActivityChart; \ No newline at end of file diff --git a/src/components/StockChart.tsx b/src/components/StockChart.tsx new file mode 100644 index 0000000..ff2d9d7 --- /dev/null +++ b/src/components/StockChart.tsx @@ -0,0 +1,37 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'; + +const data = [ + { name: 'Jan', stockIn: 4000, stockOut: 2400 }, + { name: 'Feb', stockIn: 3000, stockOut: 1398 }, + { name: 'Mar', stockIn: 2000, stockOut: 9800 }, + { name: 'Apr', stockIn: 2780, stockOut: 3908 }, + { name: 'May', stockIn: 1890, stockOut: 4800 }, + { name: 'Jun', stockIn: 2390, stockOut: 3800 }, + { name: 'Jul', stockIn: 3490, stockOut: 4300 }, +]; + +const StockChart = () => { + return ( + + + Stock Movement + + + + + + + + + + + + + + + + ); +}; + +export default StockChart; \ No newline at end of file diff --git a/src/pages/BookOut.tsx b/src/pages/BookOut.tsx new file mode 100644 index 0000000..4d69f0a --- /dev/null +++ b/src/pages/BookOut.tsx @@ -0,0 +1,7 @@ +const BookOut = () => ( +
+

Book Out Stock

+

This is the page for booking stock out to customers.

+
+); +export default BookOut; \ No newline at end of file diff --git a/src/pages/Customers.tsx b/src/pages/Customers.tsx new file mode 100644 index 0000000..2714433 --- /dev/null +++ b/src/pages/Customers.tsx @@ -0,0 +1,7 @@ +const Customers = () => ( +
+

Customers

+

This is where customer information will be managed.

+
+); +export default Customers; \ No newline at end of file diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index cf390f0..05b68cd 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -1,19 +1,43 @@ -// Update this page (the content is just a fallback if you fail to update the page) - -import { MadeWithDyad } from "@/components/made-with-dyad"; +import StatCard from '@/components/StatCard'; +import StockChart from '@/components/StockChart'; +import StockActivityChart from '@/components/StockActivityChart'; +import { DollarSign, Package, ArrowDown, AlertTriangle } from 'lucide-react'; const Index = () => { return ( -
-
-

Welcome to Your Blank App

-

- Start building your amazing project here! -

+
+
+ } + iconBgColor="bg-pink-500" + /> + } + iconBgColor="bg-orange-500" + /> + } + iconBgColor="bg-purple-500" + /> + } + iconBgColor="bg-blue-500" + /> +
+
+ +
-
); }; -export default Index; +export default Index; \ No newline at end of file diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx new file mode 100644 index 0000000..6baebcc --- /dev/null +++ b/src/pages/Settings.tsx @@ -0,0 +1,7 @@ +const Settings = () => ( +
+

Settings

+

Application settings will be configured here.

+
+); +export default Settings; \ No newline at end of file diff --git a/src/pages/StockList.tsx b/src/pages/StockList.tsx new file mode 100644 index 0000000..379c585 --- /dev/null +++ b/src/pages/StockList.tsx @@ -0,0 +1,7 @@ +const StockList = () => ( +
+

Stock List

+

This is where the list of all stock items will be displayed.

+
+); +export default StockList; \ No newline at end of file