[dyad] Created a stock management dashboard UI - wrote 12 file(s)

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 = () => (
       <Sonner />
       <BrowserRouter>
         <Routes>
-          <Route path="/" element={<Index />} />
+          <Route path="/" element={<Layout><Index /></Layout>} />
+          <Route path="/stock" element={<Layout><StockList /></Layout>} />
+          <Route path="/book-out" element={<Layout><BookOut /></Layout>} />
+          <Route path="/customers" element={<Layout><Customers /></Layout>} />
+          <Route path="/settings" element={<Layout><Settings /></Layout>} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>
@@ -24,4 +33,4 @@ const App = () => (
   </QueryClientProvider>
 );
 
-export default App;
+export default App;

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 (
+    <header className="bg-blue-500 p-4 flex justify-between items-center text-white">
+      <h2 className="text-lg font-semibold uppercase hidden md:block">Dashboard</h2>
+      <div className="flex items-center space-x-4 w-full md:w-auto justify-end">
+        <div className="relative w-full max-w-xs">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
+          <Input
+            type="search"
+            placeholder="Search..."
+            className="pl-10 bg-blue-400 border-none placeholder-gray-200 text-white focus:bg-blue-300"
+          />
+        </div>
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

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 (
+    <div className="flex h-screen bg-gray-100">
+      <Sidebar />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 p-4 md:p-8">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default Layout;

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 (
+    <aside className="w-64 flex-shrink-0 bg-white p-4 hidden md:flex flex-col">
+      <div>
+        <div className="flex items-center mb-8">
+          <Box className="h-8 w-8 text-blue-600 mr-2" />
+          <h1 className="text-xl font-bold text-gray-800">JEI Stock Take</h1>
+        </div>
+        <nav className="space-y-2">
+          <NavLink to="/" className={navLinkClasses} end>
+            <LayoutDashboard className="mr-3 h-5 w-5" />
+            Dashboard
+          </NavLink>
+          <NavLink to="/stock" className={navLinkClasses}>
+            <Package className="mr-3 h-5 w-5" />
+            Stock List
+          </NavLink>
+          <NavLink to="/book-out" className={navLinkClasses}>
+            <ShoppingCart className="mr-3 h-5 w-5" />
+            Book Out Stock
+          </NavLink>
+          <NavLink to="/customers" className={navLinkClasses}>
+            <Users className="mr-3 h-5 w-5" />
+            Customers
+          </NavLink>
+          <NavLink to="/settings" className={navLinkClasses}>
+            <Settings className="mr-3 h-5 w-5" />
+            Settings
+          </NavLink>
+        </nav>
+      </div>
+      <div className="mt-auto">
+        <MadeWithDyad />
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;

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 (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium text-gray-500">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center">
+            <div className={`p-3 rounded-md mr-4 ${iconBgColor}`}>
+                {icon}
+            </div>
+            <div>
+                <div className="text-2xl font-bold">{value}</div>
+            </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default StatCard;

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 (
+    <Card className="col-span-1">
+      <CardHeader>
+        <CardTitle className="bg-pink-500 text-white -mt-10 mb-4 p-4 rounded-lg shadow-lg">Monthly Activity</CardTitle>
+      </CardHeader>
+      <CardContent className="h-80">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="name" />
+            <YAxis />
+            <Tooltip />
+            <Legend />
+            <Bar dataKey="stockIn" name="Stock In" fill="#8884d8" />
+            <Bar dataKey="stockOut" name="Stock Out" fill="#82ca9d" />
+          </BarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default StockActivityChart;

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 (
+    <Card className="col-span-1 lg:col-span-2">
+      <CardHeader>
+        <CardTitle className="bg-orange-500 text-white -mt-10 mb-4 p-4 rounded-lg shadow-lg">Stock Movement</CardTitle>
+      </CardHeader>
+      <CardContent className="h-80">
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="name" />
+            <YAxis />
+            <Tooltip />
+            <Legend />
+            <Line type="monotone" dataKey="stockIn" name="Stock In" stroke="#8884d8" activeDot={{ r: 8 }} />
+            <Line type="monotone" dataKey="stockOut" name="Stock Out" stroke="#82ca9d" />
+          </LineChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default StockChart;

src/pages/BookOut.tsx

@@ -0,0 +1,7 @@
+const BookOut = () => (
+  <div>
+    <h1 className="text-2xl font-bold">Book Out Stock</h1>
+    <p>This is the page for booking stock out to customers.</p>
+  </div>
+);
+export default BookOut;

src/pages/Customers.tsx

@@ -0,0 +1,7 @@
+const Customers = () => (
+  <div>
+    <h1 className="text-2xl font-bold">Customers</h1>
+    <p>This is where customer information will be managed.</p>
+  </div>
+);
+export default Customers;

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 (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
-        <p className="text-xl text-gray-600">
-          Start building your amazing project here!
-        </p>
+    <div className="space-y-8">
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          title="Total Stock Value"
+          value="$150,231.89"
+          icon={<DollarSign className="h-6 w-6 text-white" />}
+          iconBgColor="bg-pink-500"
+        />
+        <StatCard
+          title="Items in Stock"
+          value="2,350"
+          icon={<Package className="h-6 w-6 text-white" />}
+          iconBgColor="bg-orange-500"
+        />
+        <StatCard
+          title="Stock Out (30 days)"
+          value="924"
+          icon={<ArrowDown className="h-6 w-6 text-white" />}
+          iconBgColor="bg-purple-500"
+        />
+        <StatCard
+          title="Low Stock Alerts"
+          value="12"
+          icon={<AlertTriangle className="h-6 w-6 text-white" />}
+          iconBgColor="bg-blue-500"
+        />
+      </div>
+      <div className="grid gap-8 md:grid-cols-1 lg:grid-cols-3">
+        <StockChart />
+        <StockActivityChart />
       </div>
-      <MadeWithDyad />
     </div>
   );
 };
 
-export default Index;
+export default Index;

src/pages/Settings.tsx

@@ -0,0 +1,7 @@
+const Settings = () => (
+  <div>
+    <h1 className="text-2xl font-bold">Settings</h1>
+    <p>Application settings will be configured here.</p>
+  </div>
+);
+export default Settings;

src/pages/StockList.tsx

@@ -0,0 +1,7 @@
+const StockList = () => (
+  <div>
+    <h1 className="text-2xl font-bold">Stock List</h1>
+    <p>This is where the list of all stock items will be displayed.</p>
+  </div>
+);
+export default StockList;