Develop reselling inventory and sales tracker

client/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "inventory-app-client",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@types/node": "^16.18.68",
+    "@types/react": "^18.2.42",
+    "@types/react-dom": "^18.2.17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4",
+    "react-router-dom": "^6.20.1",
+    "axios": "^1.6.2",
+    "socket.io-client": "^4.7.4",
+    "recharts": "^2.8.0",
+    "lucide-react": "^0.294.0",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^2.0.0",
+    "date-fns": "^2.30.0",
+    "react-hook-form": "^7.48.2",
+    "react-hot-toast": "^2.4.1",
+    "framer-motion": "^10.16.16",
+    "react-query": "^3.39.3",
+    "zustand": "^4.4.7",
+    "react-table": "^7.8.0",
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
+    "react-select": "^5.8.0",
+    "react-datepicker": "^4.25.0",
+    "@types/react-datepicker": "^4.19.4",
+    "react-dropzone": "^14.2.3",
+    "qrcode.react": "^3.1.0",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^2.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react-table": "^7.7.15",
+    "@types/react-dropzone": "^5.1.0",
+    "tailwindcss": "^3.3.6",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32"
+  },
+  "proxy": "http://localhost:5000"
+}

client/src/App.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Toaster } from 'react-hot-toast';
+import { motion, AnimatePresence } from 'framer-motion';
+
+// Components
+import Layout from './components/Layout/Layout';
+import Dashboard from './pages/Dashboard/Dashboard';
+import Inventory from './pages/Inventory/Inventory';
+import Reports from './pages/Reports/Reports';
+import Sales from './pages/Sales/Sales';
+import Categories from './pages/Categories/Categories';
+import Suppliers from './pages/Suppliers/Suppliers';
+import Customers from './pages/Customers/Customers';
+import Settings from './pages/Settings/Settings';
+
+// Styles
+import './index.css';
+
+// Create a client for React Query
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 5 * 60 * 1000, // 5 minutes
+    },
+  },
+});
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Router>
+        <div className="min-h-screen bg-dark-900 text-white overflow-hidden">
+          {/* Animated background */}
+          <div className="fixed inset-0 bg-cyber-grid opacity-20 animate-float"></div>
+
+          {/* Main content */}
+          <AnimatePresence mode="wait">
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.5 }}
+              className="relative z-10"
+            >
+              <Layout>
+                <Routes>
+                  <Route path="/" element={<Dashboard />} />
+                  <Route path="/inventory" element={<Inventory />} />
+                  <Route path="/reports" element={<Reports />} />
+                  <Route path="/sales" element={<Sales />} />
+                  <Route path="/categories" element={<Categories />} />
+                  <Route path="/suppliers" element={<Suppliers />} />
+                  <Route path="/customers" element={<Customers />} />
+                  <Route path="/settings" element={<Settings />} />
+                </Routes>
+              </Layout>
+            </motion.div>
+          </AnimatePresence>
+
+          {/* Toast notifications */}
+          <Toaster
+            position="top-right"
+            toastOptions={{
+              duration: 4000,
+              style: {
+                background: '#1e293b',
+                color: '#fff',
+                border: '1px solid #3b82f6',
+                borderRadius: '8px',
+                boxShadow: '0 0 10px rgba(59, 130, 246, 0.3)',
+              },
+              success: {
+                iconTheme: {
+                  primary: '#22c55e',
+                  secondary: '#fff',
+                },
+                style: {
+                  border: '1px solid #22c55e',
+                  boxShadow: '0 0 10px rgba(34, 197, 94, 0.3)',
+                },
+              },
+              error: {
+                iconTheme: {
+                  primary: '#ef4444',
+                  secondary: '#fff',
+                },
+                style: {
+                  border: '1px solid #ef4444',
+                  boxShadow: '0 0 10px rgba(239, 68, 68, 0.3)',
+                },
+              },
+            }}
+          />
+        </div>
+      </Router>
+    </QueryClientProvider>
+  );
+}
+
+export default App;

client/src/components/Layout/Layout.tsx

@@ -0,0 +1,202 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  LayoutDashboard, 
+  Package, 
+  BarChart3, 
+  ShoppingCart, 
+  Tags, 
+  Truck, 
+  Users, 
+  Settings,
+  Menu,
+  X,
+  Bell,
+  Search,
+  User
+} from 'lucide-react';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const location = useLocation();
+
+  const navigation = [
+    { name: 'Dashboard', href: '/', icon: LayoutDashboard },
+    { name: 'Inventory', href: '/inventory', icon: Package },
+    { name: 'Reports', href: '/reports', icon: BarChart3 },
+    { name: 'Sales', href: '/sales', icon: ShoppingCart },
+    { name: 'Categories', href: '/categories', icon: Tags },
+    { name: 'Suppliers', href: '/suppliers', icon: Truck },
+    { name: 'Customers', href: '/customers', icon: Users },
+    { name: 'Settings', href: '/settings', icon: Settings },
+  ];
+
+  const isActive = (href: string) => {
+    if (href === '/') {
+      return location.pathname === '/';
+    }
+    return location.pathname.startsWith(href);
+  };
+
+  return (
+    <div className="flex h-screen bg-dark-900">
+      {/* Mobile sidebar overlay */}
+      <AnimatePresence>
+        {sidebarOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-40 lg:hidden"
+            onClick={() => setSidebarOpen(false)}
+          >
+            <div className="absolute inset-0 bg-black bg-opacity-50" />
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Sidebar */}
+      <motion.div
+        initial={{ x: -300 }}
+        animate={{ x: sidebarOpen ? 0 : -300 }}
+        transition={{ type: 'spring', damping: 20 }}
+        className={`fixed inset-y-0 left-0 z-50 w-64 bg-dark-800 border-r border-dark-600 lg:translate-x-0 lg:static lg:inset-0 ${
+          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        <div className="flex flex-col h-full">
+          {/* Logo */}
+          <div className="flex items-center justify-between h-16 px-6 border-b border-dark-600">
+            <Link to="/" className="flex items-center space-x-2">
+              <div className="w-8 h-8 bg-gradient-to-br from-neon-blue to-neon-purple rounded-lg flex items-center justify-center">
+                <Package className="w-5 h-5 text-white" />
+              </div>
+              <span className="text-xl font-display font-bold text-neon-blue">
+                INVENTORY
+              </span>
+            </Link>
+            <button
+              onClick={() => setSidebarOpen(false)}
+              className="lg:hidden p-2 rounded-md text-dark-400 hover:text-white hover:bg-dark-700"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+
+          {/* Navigation */}
+          <nav className="flex-1 px-4 py-6 space-y-2">
+            {navigation.map((item) => {
+              const Icon = item.icon;
+              const active = isActive(item.href);
+
+              return (
+                <Link
+                  key={item.name}
+                  to={item.href}
+                  onClick={() => setSidebarOpen(false)}
+                  className={`group flex items-center px-3 py-3 text-sm font-medium rounded-lg transition-all duration-200 ${
+                    active
+                      ? 'bg-neon-blue bg-opacity-20 text-neon-blue border border-neon-blue border-opacity-30'
+                      : 'text-dark-300 hover:text-white hover:bg-dark-700'
+                  }`}
+                >
+                  <Icon className={`mr-3 w-5 h-5 ${
+                    active ? 'text-neon-blue' : 'text-dark-400 group-hover:text-white'
+                  }`} />
+                  {item.name}
+                  {active && (
+                    <motion.div
+                      layoutId="activeTab"
+                      className="absolute right-2 w-2 h-2 bg-neon-blue rounded-full"
+                      initial={false}
+                      transition={{ type: 'spring', stiffness: 500, damping: 30 }}
+                    />
+                  )}
+                </Link>
+              );
+            })}
+          </nav>
+
+          {/* User info */}
+          <div className="p-4 border-t border-dark-600">
+            <div className="flex items-center space-x-3">
+              <div className="w-8 h-8 bg-gradient-to-br from-neon-green to-neon-blue rounded-full flex items-center justify-center">
+                <User className="w-4 h-4 text-white" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-white truncate">
+                  Admin User
+                </p>
+                <p className="text-xs text-dark-400 truncate">
+                  admin@inventory.com
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Main content */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Header */}
+        <header className="bg-dark-800 border-b border-dark-600 px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <button
+                onClick={() => setSidebarOpen(true)}
+                className="lg:hidden p-2 rounded-md text-dark-400 hover:text-white hover:bg-dark-700"
+              >
+                <Menu className="w-5 h-5" />
+              </button>
+
+              {/* Search bar */}
+              <div className="relative hidden md:block">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-dark-400" />
+                <input
+                  type="text"
+                  placeholder="Search inventory..."
+                  className="w-64 pl-10 pr-4 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-dark-400 focus:border-neon-blue focus:ring-1 focus:ring-neon-blue focus:ring-opacity-50 transition-all duration-200"
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center space-x-4">
+              {/* Notifications */}
+              <button className="relative p-2 text-dark-400 hover:text-white hover:bg-dark-700 rounded-lg transition-colors duration-200">
+                <Bell className="w-5 h-5" />
+                <span className="absolute top-1 right-1 w-2 h-2 bg-neon-pink rounded-full animate-pulse"></span>
+              </button>
+
+              {/* Quick actions */}
+              <button className="btn-cyber text-sm">
+                Quick Add
+              </button>
+            </div>
+          </div>
+        </header>
+
+        {/* Page content */}
+        <main className="flex-1 overflow-auto p-6">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={location.pathname}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.3 }}
+            >
+              {children}
+            </motion.div>
+          </AnimatePresence>
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default Layout;