matt/inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add motion library and login animations

Browse Source
This commit is contained in:
Matt
2025-01-14 23:37:31 -05:00
parent b6f69c254c
commit 3efd171ec6
12 changed files with 163 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
inventory/package-lock.json generated
View File

@@ -36,6 +36,7 @@
"cmdk": "^1.0.0", "cmdk": "^1.0.0",
"date-fns": "^3.6.0", "date-fns": "^3.6.0",
"lucide-react": "^0.469.0", "lucide-react": "^0.469.0",
"motion": "^11.18.0",
"next-themes": "^0.4.4", "next-themes": "^0.4.4",
"react": "^18.3.1", "react": "^18.3.1",
"react-chartjs-2": "^5.3.0", "react-chartjs-2": "^5.3.0",
@@ -4606,6 +4607,33 @@
"url": "https://github.com/sponsors/rawify" "url": "https://github.com/sponsors/rawify"
} }
}, },
"node_modules/framer-motion": {
"version": "11.18.0",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.0.tgz",
"integrity": "sha512-Vmjl5Al7XqKHzDFnVqzi1H9hzn5w4eN/bdqXTymVpU2UuMQuz9w6UPdsL9dFBeH7loBlnu4qcEXME+nvbkcIOw==",
"license": "MIT",
"dependencies": {
"motion-dom": "^11.16.4",
"motion-utils": "^11.16.0",
"tslib": "^2.4.0"
},
"peerDependencies": {
"@emotion/is-prop-valid": "*",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/is-prop-valid": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
}
},
"node_modules/fs-extra": { "node_modules/fs-extra": {
"version": "11.2.0", "version": "11.2.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -5270,6 +5298,47 @@
"node": ">=16 || 14 >=14.17" "node": ">=16 || 14 >=14.17"
} }
}, },
"node_modules/motion": {
"version": "11.18.0",
"resolved": "https://registry.npmjs.org/motion/-/motion-11.18.0.tgz",
"integrity": "sha512-uJ4zNXh/4K9C5wftxHKlXLHC0Rc9dHSHPyO1P6T9XE2bTn2z8C2lOZX/M8vAmFp0gtJTJ3aYkv44lTtJSfv6+A==",
"license": "MIT",
"dependencies": {
"framer-motion": "^11.18.0",
"tslib": "^2.4.0"
},
"peerDependencies": {
"@emotion/is-prop-valid": "*",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/is-prop-valid": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
}
},
"node_modules/motion-dom": {
"version": "11.16.4",
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.4.tgz",
"integrity": "sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==",
"license": "MIT",
"dependencies": {
"motion-utils": "^11.16.0"
}
},
"node_modules/motion-utils": {
"version": "11.16.0",
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.16.0.tgz",
"integrity": "sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==",
"license": "MIT"
},
"node_modules/ms": { "node_modules/ms": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

1
inventory/package.json
View File

@@ -38,6 +38,7 @@
"cmdk": "^1.0.0", "cmdk": "^1.0.0",
"date-fns": "^3.6.0", "date-fns": "^3.6.0",
"lucide-react": "^0.469.0", "lucide-react": "^0.469.0",
"motion": "^11.18.0",
"next-themes": "^0.4.4", "next-themes": "^0.4.4",
"react": "^18.3.1", "react": "^18.3.1",
"react-chartjs-2": "^5.3.0", "react-chartjs-2": "^5.3.0",

2
inventory/src/App.tsx
View File

@@ -2,7 +2,6 @@ import { Routes, Route, useNavigate, Navigate } from 'react-router-dom';
import { MainLayout } from './components/layout/MainLayout'; import { MainLayout } from './components/layout/MainLayout';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Products } from './pages/Products'; import { Products } from './pages/Products';
import { Import } from './pages/Import';
import { Dashboard } from './pages/Dashboard'; import { Dashboard } from './pages/Dashboard';
import { Orders } from './pages/Orders'; import { Orders } from './pages/Orders';
import { Settings } from './pages/Settings'; import { Settings } from './pages/Settings';
@@ -55,7 +54,6 @@ function App() {
<Route element={<MainLayout />}> <Route element={<MainLayout />}>
<Route path="/" element={<Dashboard />} /> <Route path="/" element={<Dashboard />} />
<Route path="/products" element={<Products />} /> <Route path="/products" element={<Products />} />
<Route path="/import" element={<Import />} />
<Route path="/orders" element={<Orders />} /> <Route path="/orders" element={<Orders />} />
<Route path="/purchase-orders" element={<PurchaseOrders />} /> <Route path="/purchase-orders" element={<PurchaseOrders />} />
<Route path="/analytics" element={<Analytics />} /> <Route path="/analytics" element={<Analytics />} />

29
inventory/src/components/layout/MainLayout.tsx
View File

@@ -1,21 +1,24 @@
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "./AppSidebar"; import { AppSidebar } from "./AppSidebar";
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
import { motion } from "motion/react";
export function MainLayout() { export function MainLayout() {
return ( return (
<SidebarProvider defaultOpen> <motion.div layout>
<div className="flex min-h-screen w-full pr-2"> <SidebarProvider defaultOpen>
<AppSidebar /> <div className="flex min-h-screen w-full pr-2">
<main className="flex-1 overflow-hidden"> <AppSidebar />
<div className="flex h-14 w-full items-center border-b px-4 gap-4"> <main className="flex-1 overflow-hidden">
<SidebarTrigger /> <div className="flex h-14 w-full items-center border-b px-4 gap-4">
</div> <SidebarTrigger />
<div className="overflow-auto h-[calc(100vh-3.5rem)] max-w-[1500px]"> </div>
<Outlet /> <div className="overflow-auto h-[calc(100vh-3.5rem)] max-w-[1500px]">
</div> <Outlet />
</main> </div>
</div> </main>
</SidebarProvider> </div>
</SidebarProvider>
</motion.div>
); );
} }

5
inventory/src/pages/Analytics.tsx
View File

@@ -7,6 +7,7 @@ import { StockAnalysis } from '../components/analytics/StockAnalysis';
import { PriceAnalysis } from '../components/analytics/PriceAnalysis'; import { PriceAnalysis } from '../components/analytics/PriceAnalysis';
import { CategoryPerformance } from '../components/analytics/CategoryPerformance'; import { CategoryPerformance } from '../components/analytics/CategoryPerformance';
import config from '../config'; import config from '../config';
import { motion } from 'motion/react';
interface AnalyticsStats { interface AnalyticsStats {
profitMargin: number; profitMargin: number;
@@ -34,7 +35,7 @@ export function Analytics() {
} }
return ( return (
<div className="flex-1 space-y-4 p-8 pt-6"> <motion.div layout className="flex-1 space-y-4 p-8 pt-6">
<div className="flex items-center justify-between space-y-2"> <div className="flex items-center justify-between space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Analytics</h2> <h2 className="text-3xl font-bold tracking-tight">Analytics</h2>
</div> </div>
@@ -107,6 +108,6 @@ export function Analytics() {
<CategoryPerformance /> <CategoryPerformance />
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </motion.div>
); );
} }

6
inventory/src/pages/Dashboard.tsx
View File

@@ -4,10 +4,10 @@ import { LowStockAlerts } from "@/components/dashboard/LowStockAlerts"
import { TrendingProducts } from "@/components/dashboard/TrendingProducts" import { TrendingProducts } from "@/components/dashboard/TrendingProducts"
import { VendorPerformance } from "@/components/dashboard/VendorPerformance" import { VendorPerformance } from "@/components/dashboard/VendorPerformance"
import { KeyMetricsCharts } from "@/components/dashboard/KeyMetricsCharts" import { KeyMetricsCharts } from "@/components/dashboard/KeyMetricsCharts"
import { motion } from "motion/react"
export function Dashboard() { export function Dashboard() {
return ( return (
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6"> <motion.div layout className="flex-1 space-y-4 p-4 md:p-8 pt-6">
<div className="flex items-center justify-between space-y-2"> <div className="flex items-center justify-between space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Dashboard</h2> <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
</div> </div>
@@ -30,7 +30,7 @@ export function Dashboard() {
<VendorPerformance /> <VendorPerformance />
</Card> </Card>
</div> </div>
</div> </motion.div>
) )
} }

80
inventory/src/pages/Import.tsx
View File

@@ -1,80 +0,0 @@
import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import config from '../config';
export function Import() {
const [file, setFile] = useState<File | null>(null);
const importMutation = useMutation({
mutationFn: async (formData: FormData) => {
const response = await fetch(`${config.apiUrl}/products/import`, {
method: 'POST',
body: formData,
});
if (!response.ok) {
throw new Error('Import failed');
}
return response.json();
},
});
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files?.[0]) {
setFile(e.target.files[0]);
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!file) return;
const formData = new FormData();
formData.append('file', file);
importMutation.mutate(formData);
};
return (
<div className="p-8">
<h1 className="text-2xl font-bold mb-6">Import Products</h1>
<div className="max-w-xl">
<form onSubmit={handleSubmit} className="space-y-6">
<div className="space-y-2">
<label className="text-sm font-medium">
Upload CSV File
</label>
<input
type="file"
accept=".csv"
onChange={handleFileChange}
className="w-full border rounded-md p-2"
/>
<p className="text-sm text-muted-foreground">
The CSV file should contain the following columns: sku, name, description (optional), category (optional)
</p>
</div>
<button
type="submit"
disabled={!file || importMutation.isPending}
className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50"
>
{importMutation.isPending ? 'Importing...' : 'Import Products'}
</button>
{importMutation.isSuccess && (
<p className="text-green-600">
Successfully imported {importMutation.data.imported} products
</p>
)}
{importMutation.isError && (
<p className="text-red-500">
Error importing products: {importMutation.error.message}
</p>
)}
</form>
</div>
</div>
);
}

92
inventory/src/pages/Login.tsx
View File

@@ -1,22 +1,18 @@
import { useState } from 'react'; import { useState } from "react";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from "react-router-dom";
import { Button } from '@/components/ui/button'; import { Button } from "@/components/ui/button";
import { import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
Card, import { Input } from "@/components/ui/input";
CardContent, import { toast } from "sonner";
CardHeader, import config from "../config";
CardTitle, import { Loader2, Box } from "lucide-react";
} from '@/components/ui/card'; import { motion } from "motion/react";
import { Input } from '@/components/ui/input';
import { toast } from 'sonner';
import config from '../config';
import { Loader2, Box } from 'lucide-react';
const isDev = process.env.NODE_ENV === 'development'; const isDev = process.env.NODE_ENV === "development";
export function Login() { export function Login() {
const [username, setUsername] = useState(''); const [username, setUsername] = useState("");
const [password, setPassword] = useState(''); const [password, setPassword] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
@@ -26,46 +22,46 @@ export function Login() {
try { try {
const url = isDev ? "/auth-inv/login" : `${config.authUrl}/login`; const url = isDev ? "/auth-inv/login" : `${config.authUrl}/login`;
console.log('Making login request:', { console.log("Making login request:", {
url, url,
method: 'POST', method: "POST",
headers: { headers: {
'Content-Type': 'application/json', "Content-Type": "application/json",
}, },
body: { username, password }, body: { username, password },
config config,
}); });
const response = await fetch(url, { const response = await fetch(url, {
method: 'POST', method: "POST",
headers: { headers: {
'Content-Type': 'application/json', "Content-Type": "application/json",
}, },
body: JSON.stringify({ username, password }), body: JSON.stringify({ username, password }),
credentials: 'include' credentials: "include",
}); });
console.log('Login response status:', response.status); console.log("Login response status:", response.status);
if (!response.ok) { if (!response.ok) {
const data = await response.json().catch(() => ({ error: 'Failed to parse error response' })); const data = await response
console.error('Login failed:', data); .json()
throw new Error(data.error || 'Login failed'); .catch(() => ({ error: "Failed to parse error response" }));
console.error("Login failed:", data);
throw new Error(data.error || "Login failed");
} }
const data = await response.json(); const data = await response.json();
console.log('Login successful:', data); console.log("Login successful:", data);
sessionStorage.setItem('token', data.token); sessionStorage.setItem("token", data.token);
sessionStorage.setItem('isLoggedIn', 'true'); sessionStorage.setItem("isLoggedIn", "true");
toast.success('Successfully logged in'); toast.success("Successfully logged in");
navigate('/'); navigate("/", { replace: true });
} catch (error) { } catch (error) {
console.error('Login error:', error); console.error("Login error:", error);
toast.error( toast.error(
error instanceof Error error instanceof Error ? error.message : "An unexpected error occurred"
? error.message
: 'An unexpected error occurred',
); );
} finally { } finally {
setIsLoading(false); setIsLoading(false);
@@ -73,23 +69,33 @@ export function Login() {
}; };
return ( return (
<div className="min-h-screen bg-gradient-to-b from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-800 antialiased"> <motion.div
<div className="flex flex-col gap-2 p-2 bg-primary"> layout
<div className="p-4 flex items-center gap-2 group-data-[collapsible=icon]:justify-center text-white"> className="min-h-screen bg-gradient-to-b from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-800 antialiased"
>
<div className="flex flex-col gap-2 p-2 bg-primary">
<div className="p-4 flex items-center gap-2 group-data-[collapsible=icon]:justify-center text-white">
<Box className="h-6 w-6 shrink-0" /> <Box className="h-6 w-6 shrink-0" />
<h2 className="text-lg font-semibold group-data-[collapsible=icon]:hidden"> <h2 className="text-lg font-semibold group-data-[collapsible=icon]:hidden">
Inventory Manager Inventory Manager
</h2> </h2>
</div> </div>
</div> </div>
<div className="container relative flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center"> <motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.3, delay: 0.2 }}
className="container relative flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center"
>
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]"> <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
<Card className="border-none shadow-xl"> <Card className="border-none shadow-xl">
<CardHeader className="space-y-1"> <CardHeader className="space-y-1">
<div className="flex items-center justify-center mb-2"> <div className="flex items-center justify-center mb-2">
<Box className="h-10 w-10 text-primary" /> <Box className="h-10 w-10 text-primary" />
</div> </div>
<CardTitle className="text-2xl text-center">Log in to continue</CardTitle> <CardTitle className="text-2xl text-center">
Log in to continue
</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<form onSubmit={handleLogin}> <form onSubmit={handleLogin}>
@@ -126,7 +132,7 @@ export function Login() {
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div> </motion.div>
</div> </motion.div>
); );
} }

6
inventory/src/pages/Orders.tsx
View File

@@ -33,7 +33,7 @@ import { ArrowUpDown, Search } from "lucide-react";
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import config from '../config'; import config from '../config';
import { DateRange } from 'react-day-picker'; import { DateRange } from 'react-day-picker';
import { motion } from 'motion/react';
interface Order { interface Order {
order_number: string; order_number: string;
customer: string; customer: string;
@@ -130,7 +130,7 @@ export function Orders() {
); );
return ( return (
<div className="p-8 space-y-8"> <motion.div layout className="p-8 space-y-8">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">Orders</h1> <h1 className="text-2xl font-bold">Orders</h1>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
@@ -317,6 +317,6 @@ export function Orders() {
</PaginationContent> </PaginationContent>
</Pagination> </Pagination>
)} )}
</div> </motion.div>
); );
} }

16
inventory/src/pages/Products.tsx
View File

@@ -23,7 +23,7 @@ import {
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Settings2 } from "lucide-react"; import { Settings2 } from "lucide-react";
import config from '../config'; import config from '../config';
import { motion } from 'motion/react';
// Enhanced Product interface with all possible fields // Enhanced Product interface with all possible fields
interface Product { interface Product {
// Basic product info (from products table) // Basic product info (from products table)
@@ -309,10 +309,11 @@ export function Products() {
); );
return ( return (
<Pagination>
<PaginationContent> <Pagination>
<PaginationItem> <PaginationContent>
<PaginationPrevious <PaginationItem>
<PaginationPrevious
aria-disabled={page === 1 || isFetching} aria-disabled={page === 1 || isFetching}
className={page === 1 || isFetching ? 'pointer-events-none opacity-50' : ''} className={page === 1 || isFetching ? 'pointer-events-none opacity-50' : ''}
onClick={() => handlePageChange(Math.max(1, page - 1))} onClick={() => handlePageChange(Math.max(1, page - 1))}
@@ -371,11 +372,12 @@ export function Products() {
</PaginationItem> </PaginationItem>
</PaginationContent> </PaginationContent>
</Pagination> </Pagination>
); );
}; };
return ( return (
<div className="p-8 space-y-8"> <motion.div layout className="p-8 space-y-8">
<h1 className="text-2xl font-bold">Products</h1> <h1 className="text-2xl font-bold">Products</h1>
<div> <div>
@@ -451,6 +453,6 @@ export function Products() {
productId={selectedProductId} productId={selectedProductId}
onClose={() => setSelectedProductId(null)} onClose={() => setSelectedProductId(null)}
/> />
</div> </motion.div>
); );
} }

5
inventory/src/pages/PurchaseOrders.tsx
View File

@@ -19,6 +19,7 @@ import {
PaginationNext, PaginationNext,
PaginationPrevious, PaginationPrevious,
} from '../components/ui/pagination'; } from '../components/ui/pagination';
import { motion } from 'motion/react';
interface PurchaseOrder { interface PurchaseOrder {
id: number; id: number;
@@ -205,7 +206,7 @@ export default function PurchaseOrders() {
} }
return ( return (
<div className="container mx-auto py-6"> <motion.div layout className="container mx-auto py-6">
<h1 className="mb-6 text-3xl font-bold">Purchase Orders</h1> <h1 className="mb-6 text-3xl font-bold">Purchase Orders</h1>
{/* Metrics Overview */} {/* Metrics Overview */}
@@ -453,6 +454,6 @@ export default function PurchaseOrders() {
</Table> </Table>
</CardContent> </CardContent>
</Card> </Card>
</div> </motion.div>
); );
} }

5
inventory/src/pages/Settings.tsx
View File

@@ -3,10 +3,11 @@ import { DataManagement } from "@/components/settings/DataManagement";
import { StockManagement } from "@/components/settings/StockManagement"; import { StockManagement } from "@/components/settings/StockManagement";
import { PerformanceMetrics } from "@/components/settings/PerformanceMetrics"; import { PerformanceMetrics } from "@/components/settings/PerformanceMetrics";
import { CalculationSettings } from "@/components/settings/CalculationSettings"; import { CalculationSettings } from "@/components/settings/CalculationSettings";
import { motion } from 'motion/react';
export function Settings() { export function Settings() {
return ( return (
<div className="container mx-auto py-6"> <motion.div layout className="container mx-auto py-6">
<div className="mb-6"> <div className="mb-6">
<h1 className="text-3xl font-bold">Settings</h1> <h1 className="text-3xl font-bold">Settings</h1>
</div> </div>
@@ -39,6 +40,6 @@ export function Settings() {
<CalculationSettings /> <CalculationSettings />
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </motion.div>
); );
} }