g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hmm

Browse Source
This commit is contained in:
NotII
2025-07-17 16:07:07 +01:00
parent e65d6d3fee
commit 0fa33df2ad
9 changed files with 607 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/dashboard/chats/page.tsx
View File

@@ -1,10 +1,63 @@
"use client"; "use client";
import { useEffect } from "react"; import { useEffect, Suspense } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import ChatTable from "@/components/dashboard/ChatTable";
import Dashboard from "@/components/dashboard/dashboard"; import Dashboard from "@/components/dashboard/dashboard";
import { MessageCircle } from "lucide-react"; import { MessageCircle } from "lucide-react";
import dynamic from "next/dynamic";
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
// Lazy load the ChatTable component
const ChatTable = dynamic(() => import("@/components/dashboard/ChatTable"), {
loading: () => <ChatTableSkeleton />
});
// Loading skeleton for the chat table
function ChatTableSkeleton() {
return (
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<Skeleton className="h-6 w-32" />
<Skeleton className="h-9 w-24" />
</div>
</CardHeader>
<CardContent>
<div className="border rounded-lg">
<div className="border-b p-4">
<div className="flex items-center gap-4">
{['Customer', 'Last Message', 'Date', 'Status', 'Actions'].map((header, i) => (
<Skeleton key={i} className="h-4 w-20 flex-1" />
))}
</div>
</div>
{[...Array(6)].map((_, i) => (
<div key={i} className="border-b last:border-b-0 p-4">
<div className="flex items-center gap-4">
<div className="flex items-center gap-3 flex-1">
<Skeleton className="h-10 w-10 rounded-full" />
<div className="space-y-1">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-3 w-24" />
</div>
</div>
<Skeleton className="h-4 w-40 flex-1" />
<Skeleton className="h-4 w-20 flex-1" />
<Skeleton className="h-6 w-16 flex-1" />
<div className="flex gap-2 flex-1">
<Skeleton className="h-8 w-16" />
<Skeleton className="h-8 w-16" />
</div>
</div>
</div>
))}
</div>
</CardContent>
</Card>
);
}
export default function ChatsPage() { export default function ChatsPage() {
const router = useRouter(); const router = useRouter();
@@ -30,7 +83,9 @@ export default function ChatsPage() {
</h1> </h1>
</div> </div>
<ChatTable /> <Suspense fallback={<ChatTableSkeleton />}>
<ChatTable />
</Suspense>
</div> </div>
</Dashboard> </Dashboard>
); );

61
app/dashboard/orders/page.tsx
View File

@@ -1,10 +1,63 @@
"use client"; "use client";
import { useEffect } from "react"; import { useEffect, Suspense } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Dashboard from "@/components/dashboard/dashboard"; import Dashboard from "@/components/dashboard/dashboard";
import { Package } from "lucide-react"; import { Package } from "lucide-react";
import OrderTable from "@/components/tables/order-table"; import dynamic from "next/dynamic";
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
// Lazy load the OrderTable component
const OrderTable = dynamic(() => import("@/components/tables/order-table"), {
loading: () => <OrderTableSkeleton />
});
// Loading skeleton for the order table
function OrderTableSkeleton() {
return (
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<Skeleton className="h-6 w-32" />
<div className="flex gap-2">
<Skeleton className="h-9 w-24" />
<Skeleton className="h-9 w-32" />
</div>
</div>
</CardHeader>
<CardContent>
{/* Table header skeleton */}
<div className="border rounded-lg">
<div className="border-b p-4">
<div className="flex items-center gap-4">
{['Order ID', 'Customer', 'Status', 'Total', 'Date', 'Actions'].map((header, i) => (
<Skeleton key={i} className="h-4 w-20 flex-1" />
))}
</div>
</div>
{/* Table rows skeleton */}
{[...Array(8)].map((_, i) => (
<div key={i} className="border-b last:border-b-0 p-4">
<div className="flex items-center gap-4">
<Skeleton className="h-4 w-24 flex-1" />
<Skeleton className="h-4 w-32 flex-1" />
<Skeleton className="h-6 w-20 flex-1" />
<Skeleton className="h-4 w-16 flex-1" />
<Skeleton className="h-4 w-20 flex-1" />
<div className="flex gap-2 flex-1">
<Skeleton className="h-8 w-16" />
<Skeleton className="h-8 w-16" />
</div>
</div>
</div>
))}
</div>
</CardContent>
</Card>
);
}
export default function OrdersPage() { export default function OrdersPage() {
const router = useRouter(); const router = useRouter();
@@ -30,7 +83,9 @@ export default function OrdersPage() {
</h1> </h1>
</div> </div>
<OrderTable /> <Suspense fallback={<OrderTableSkeleton />}>
<OrderTable />
</Suspense>
</div> </div>
</Dashboard> </Dashboard>
); );

68
app/dashboard/page.tsx
View File

@@ -1,10 +1,72 @@
import Dashboard from "@/components/dashboard/dashboard"; import Dashboard from "@/components/dashboard/dashboard";
import Content from "@/components/dashboard/content";
import { fetchServer } from '@/lib/api'; import { fetchServer } from '@/lib/api';
import { performance } from 'perf_hooks'; import { performance } from 'perf_hooks';
import { Info, GitCommit, User, Zap } from 'lucide-react'; import { Info, GitCommit, User, Zap } from 'lucide-react';
import packageJson from '../../package.json'; import packageJson from '../../package.json';
import { getGitInfo, getShortGitHash } from '@/lib/utils/git'; import { getGitInfo, getShortGitHash } from '@/lib/utils/git';
import { Suspense } from 'react';
import dynamic from 'next/dynamic';
import { Skeleton } from '@/components/ui/skeleton';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
// Lazy load the Content component
const Content = dynamic(() => import("@/components/dashboard/content"), {
loading: () => <DashboardContentSkeleton />
});
// Loading skeleton for the dashboard content
function DashboardContentSkeleton() {
return (
<div className="space-y-6">
{/* Header skeleton */}
<div>
<Skeleton className="h-8 w-64 mb-2" />
<Skeleton className="h-4 w-96" />
</div>
{/* Stats cards skeleton */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{[...Array(4)].map((_, i) => (
<Card key={i}>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<Skeleton className="h-4 w-20" />
<Skeleton className="h-5 w-5 rounded" />
</CardHeader>
<CardContent>
<Skeleton className="h-7 w-16 mb-1" />
<Skeleton className="h-3 w-24" />
</CardContent>
</Card>
))}
</div>
{/* Best selling products skeleton */}
<Card>
<CardHeader>
<Skeleton className="h-6 w-48" />
<Skeleton className="h-4 w-72" />
</CardHeader>
<CardContent>
<div className="space-y-4">
{[...Array(5)].map((_, i) => (
<div key={i} className="flex items-center gap-4">
<Skeleton className="h-12 w-12 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-40" />
<Skeleton className="h-4 w-20" />
</div>
<div className="ml-auto text-right">
<Skeleton className="h-4 w-16 ml-auto" />
<Skeleton className="h-4 w-16 ml-auto mt-2" />
</div>
</div>
))}
</div>
</CardContent>
</Card>
</div>
);
}
// ✅ Corrected Vendor Type // ✅ Corrected Vendor Type
interface Vendor { interface Vendor {
@@ -46,7 +108,9 @@ export default async function DashboardPage() {
return ( return (
<Dashboard> <Dashboard>
<Content username={vendor.username} orderStats={orderStats} /> <Suspense fallback={<DashboardContentSkeleton />}>
<Content username={vendor.username} orderStats={orderStats} />
</Suspense>
<div className="fixed bottom-2 right-2 text-xs text-muted-foreground bg-background/80 backdrop-blur-sm px-2 py-1 rounded border border-border/50 z-50 flex items-center space-x-2"> <div className="fixed bottom-2 right-2 text-xs text-muted-foreground bg-background/80 backdrop-blur-sm px-2 py-1 rounded border border-border/50 z-50 flex items-center space-x-2">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Info size={12} className="text-muted-foreground/80" /> <Info size={12} className="text-muted-foreground/80" />

71
app/dashboard/products/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { useState, useEffect, ChangeEvent } from "react"; import { useState, useEffect, ChangeEvent, Suspense } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Layout from "@/components/layout/layout"; import Layout from "@/components/layout/layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@@ -8,11 +8,74 @@ import { Input } from "@/components/ui/input";
import { Product } from "@/models/products"; import { Product } from "@/models/products";
import { Plus, Upload, Search, RefreshCw, Package2 } from "lucide-react"; import { Plus, Upload, Search, RefreshCw, Package2 } from "lucide-react";
import { clientFetch } from "@/lib/api"; import { clientFetch } from "@/lib/api";
import { ProductModal } from "@/components/modals/product-modal";
import ProductTable from "@/components/tables/product-table";
import { Category } from "@/models/categories"; import { Category } from "@/models/categories";
import ImportProductsModal from "@/components/modals/import-products-modal";
import { toast } from "sonner"; import { toast } from "sonner";
import dynamic from "next/dynamic";
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
// Lazy load heavy components
const ProductTable = dynamic(() => import("@/components/tables/product-table"), {
loading: () => <ProductTableSkeleton />
});
const ProductModal = dynamic(() => import("@/components/modals/product-modal").then(mod => ({ default: mod.ProductModal })), {
loading: () => <div>Loading...</div>
});
const ImportProductsModal = dynamic(() => import("@/components/modals/import-products-modal"), {
loading: () => <div>Loading...</div>
});
// Loading skeleton for the product table
function ProductTableSkeleton() {
return (
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<Skeleton className="h-6 w-32" />
<div className="flex gap-2">
<Skeleton className="h-9 w-24" />
<Skeleton className="h-9 w-32" />
</div>
</div>
</CardHeader>
<CardContent>
<div className="border rounded-lg">
<div className="border-b p-4">
<div className="flex items-center gap-4">
{['Product', 'Category', 'Price', 'Stock', 'Status', 'Actions'].map((header, i) => (
<Skeleton key={i} className="h-4 w-20 flex-1" />
))}
</div>
</div>
{[...Array(8)].map((_, i) => (
<div key={i} className="border-b last:border-b-0 p-4">
<div className="flex items-center gap-4">
<div className="flex items-center gap-3 flex-1">
<Skeleton className="h-12 w-12 rounded-md" />
<div className="space-y-1">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-3 w-24" />
</div>
</div>
<Skeleton className="h-4 w-24 flex-1" />
<Skeleton className="h-4 w-16 flex-1" />
<Skeleton className="h-4 w-16 flex-1" />
<Skeleton className="h-6 w-20 flex-1" />
<div className="flex gap-2 flex-1">
<Skeleton className="h-8 w-16" />
<Skeleton className="h-8 w-16" />
</div>
</div>
</div>
))}
</div>
</CardContent>
</Card>
);
}
export default function ProductsPage() { export default function ProductsPage() {
const router = useRouter(); const router = useRouter();

66
app/dashboard/shipping/page.tsx
View File

@@ -1,11 +1,10 @@
"use client"; "use client";
import { useState, useEffect, ChangeEvent } from "react"; import { useState, useEffect, ChangeEvent, Suspense } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Layout from "@/components/layout/layout"; import Layout from "@/components/layout/layout";
import { Edit, Plus, Trash, Truck } from "lucide-react"; import { Edit, Plus, Trash, Truck } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { ShippingModal } from "@/components/modals/shipping-modal";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { import {
fetchShippingMethods, fetchShippingMethods,
@@ -15,8 +14,55 @@ import {
ShippingMethod, ShippingMethod,
ShippingData ShippingData
} from "@/lib/services/shipping-service"; } from "@/lib/services/shipping-service";
import dynamic from "next/dynamic";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { ShippingTable } from "@/components/tables/shipping-table"; // Lazy load components
const ShippingModal = dynamic(() => import("@/components/modals/shipping-modal").then(mod => ({ default: mod.ShippingModal })), {
loading: () => <div>Loading...</div>
});
const ShippingTable = dynamic(() => import("@/components/tables/shipping-table").then(mod => ({ default: mod.ShippingTable })), {
loading: () => <ShippingTableSkeleton />
});
// Loading skeleton for shipping table
function ShippingTableSkeleton() {
return (
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<Skeleton className="h-6 w-32" />
<Skeleton className="h-9 w-24" />
</div>
</CardHeader>
<CardContent>
<div className="border rounded-lg">
<div className="border-b p-4">
<div className="flex items-center gap-4">
{['Method Name', 'Price', 'Actions'].map((header, i) => (
<Skeleton key={i} className="h-4 w-20 flex-1" />
))}
</div>
</div>
{[...Array(4)].map((_, i) => (
<div key={i} className="border-b last:border-b-0 p-4">
<div className="flex items-center gap-4">
<Skeleton className="h-4 w-32 flex-1" />
<Skeleton className="h-4 w-16 flex-1" />
<div className="flex gap-2 flex-1">
<Skeleton className="h-8 w-16" />
<Skeleton className="h-8 w-16" />
</div>
</div>
</div>
))}
</div>
</CardContent>
</Card>
);
}
export default function ShippingPage() { export default function ShippingPage() {
const [shippingMethods, setShippingMethods] = useState<ShippingMethod[]>([]); const [shippingMethods, setShippingMethods] = useState<ShippingMethod[]>([]);
@@ -191,12 +237,14 @@ export default function ShippingPage() {
</div> </div>
{/* Shipping Methods Table */} {/* Shipping Methods Table */}
<ShippingTable <Suspense fallback={<ShippingTableSkeleton />}>
shippingMethods={shippingMethods} <ShippingTable
loading={loading} shippingMethods={shippingMethods}
onEditShipping={handleEditShipping} loading={loading}
onDeleteShipping={handleDeleteShipping} onEditShipping={handleEditShipping}
/> onDeleteShipping={handleDeleteShipping}
/>
</Suspense>
</div> </div>
{/* Shipping Modal */} {/* Shipping Modal */}

61
components/analytics/AnalyticsDashboard.tsx
View File

@@ -1,6 +1,6 @@
"use client" "use client"
import { useState, useEffect } from 'react'; import { useState, useEffect, Suspense } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
@@ -18,14 +18,49 @@ import {
RefreshCw RefreshCw
} from "lucide-react"; } from "lucide-react";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import RevenueChart from "./RevenueChart";
import ProductPerformanceChart from "./ProductPerformanceChart";
import CustomerInsightsChart from "./CustomerInsightsChart";
import OrderAnalyticsChart from "./OrderAnalyticsChart";
import MetricsCard from "./MetricsCard"; import MetricsCard from "./MetricsCard";
import { getAnalyticsOverviewWithStore, type AnalyticsOverview } from "@/lib/services/analytics-service"; import { getAnalyticsOverviewWithStore, type AnalyticsOverview } from "@/lib/services/analytics-service";
import { formatGBP } from "@/utils/format"; import { formatGBP } from "@/utils/format";
import { MetricsCardSkeleton } from './SkeletonLoaders'; import { MetricsCardSkeleton } from './SkeletonLoaders';
import dynamic from 'next/dynamic';
import { Skeleton } from "@/components/ui/skeleton";
// Lazy load chart components
const RevenueChart = dynamic(() => import('./RevenueChart'), {
loading: () => <ChartSkeleton />
});
const ProductPerformanceChart = dynamic(() => import('./ProductPerformanceChart'), {
loading: () => <ChartSkeleton />
});
const CustomerInsightsChart = dynamic(() => import('./CustomerInsightsChart'), {
loading: () => <ChartSkeleton />
});
const OrderAnalyticsChart = dynamic(() => import('./OrderAnalyticsChart'), {
loading: () => <ChartSkeleton />
});
// Chart loading skeleton
function ChartSkeleton() {
return (
<Card>
<CardHeader>
<Skeleton className="h-6 w-48" />
<Skeleton className="h-4 w-72" />
</CardHeader>
<CardContent>
<div className="h-80 w-full flex items-center justify-center">
<div className="flex flex-col items-center gap-2">
<BarChart3 className="h-8 w-8 text-muted-foreground animate-pulse" />
<Skeleton className="h-4 w-32" />
</div>
</div>
</CardContent>
</Card>
);
}
interface AnalyticsDashboardProps { interface AnalyticsDashboardProps {
initialData: AnalyticsOverview; initialData: AnalyticsOverview;
@@ -191,19 +226,27 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
</TabsList> </TabsList>
<TabsContent value="revenue" className="space-y-6"> <TabsContent value="revenue" className="space-y-6">
<RevenueChart timeRange={timeRange} /> <Suspense fallback={<ChartSkeleton />}>
<RevenueChart timeRange={timeRange} />
</Suspense>
</TabsContent> </TabsContent>
<TabsContent value="products" className="space-y-6"> <TabsContent value="products" className="space-y-6">
<ProductPerformanceChart /> <Suspense fallback={<ChartSkeleton />}>
<ProductPerformanceChart />
</Suspense>
</TabsContent> </TabsContent>
<TabsContent value="customers" className="space-y-6"> <TabsContent value="customers" className="space-y-6">
<CustomerInsightsChart /> <Suspense fallback={<ChartSkeleton />}>
<CustomerInsightsChart />
</Suspense>
</TabsContent> </TabsContent>
<TabsContent value="orders" className="space-y-6"> <TabsContent value="orders" className="space-y-6">
<OrderAnalyticsChart timeRange={timeRange} /> <Suspense fallback={<ChartSkeleton />}>
<OrderAnalyticsChart timeRange={timeRange} />
</Suspense>
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>

97
next.config.mjs
View File

@@ -1,52 +1,51 @@
import bundleAnalyzer from '@next/bundle-analyzer';
const withBundleAnalyzer = bundleAnalyzer({ enabled: process.env.ANALYZE === 'true' });
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const baseConfig = {
output: 'standalone', output: 'standalone',
reactStrictMode: false, reactStrictMode: false,
images: { images: {
remotePatterns: [ remotePatterns: [
{ {
protocol: "https", protocol: "https",
hostname: "api.telegram.org", hostname: "api.telegram.org",
}, },
{ {
protocol: "https", protocol: "https",
hostname: "telegram.org", hostname: "telegram.org",
}, },
{ {
protocol: "https", protocol: "https",
hostname: "internal-api.inboxi.ng", hostname: "internal-api.inboxi.ng",
}, },
], ],
}, },
async rewrites() { async rewrites() {
return [ return [
{ {
source: '/api/:path*', source: '/api/:path*',
destination: 'https://internal-api.inboxi.ng/api/:path*', destination: 'https://internal-api.inboxi.ng/api/:path*',
}, },
]; ];
}, },
experimental: { experimental: {
serverExternalPackages: [], serverExternalPackages: [],
}, },
// Reduce memory usage during builds onDemandEntries: {
onDemandEntries: { maxInactiveAge: 15 * 1000,
// Period (in ms) where the server will keep pages in the buffer pagesBufferLength: 2,
maxInactiveAge: 15 * 1000, },
// Number of pages that should be kept simultaneously without being disposed productionBrowserSourceMaps: false,
pagesBufferLength: 2, typescript: {
}, ignoreBuildErrors: true,
// Specify a more efficient build output mode },
productionBrowserSourceMaps: false, eslint: {
// Skip TypeScript checking during production build to speed up ignoreDuringBuilds: true,
typescript: { },
ignoreBuildErrors: true, };
},
// Skip ESLint checking during production build to speed up
eslint: {
ignoreDuringBuilds: true,
},
};
export default nextConfig; const nextConfig = withBundleAnalyzer(baseConfig);
export default nextConfig;

840
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@@ -13,7 +13,8 @@
"start": "next start", "start": "next start",
"lint": "next lint", "lint": "next lint",
"fix-lint": "node scripts/fix-eslint-issues.js", "fix-lint": "node scripts/fix-eslint-issues.js",
"clean": "rm -rf .next && rm -rf node_modules/.cache" "clean": "rm -rf .next && rm -rf node_modules/.cache",
"analyze": "ANALYZE=true next build"
}, },
"dependencies": { "dependencies": {
"@hookform/resolvers": "^3.9.1", "@hookform/resolvers": "^3.9.1",
@@ -44,8 +45,6 @@
"@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle": "^1.1.1",
"@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.6", "@radix-ui/react-tooltip": "^1.1.6",
"@react-three/drei": "^10.0.6",
"@react-three/fiber": "^9.1.2",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"axios": "^1.8.1", "axios": "^1.8.1",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
@@ -54,7 +53,6 @@
"date-fns": "4.1.0", "date-fns": "4.1.0",
"embla-carousel-react": "8.5.1", "embla-carousel-react": "8.5.1",
"form-data": "^4.0.2", "form-data": "^4.0.2",
"framer-motion": "^12.6.3",
"input-otp": "1.4.1", "input-otp": "1.4.1",
"jwt-decode": "^4.0.0", "jwt-decode": "^4.0.0",
"lucide-react": "^0.454.0", "lucide-react": "^0.454.0",
@@ -73,11 +71,11 @@
"sonner": "^1.7.4", "sonner": "^1.7.4",
"tailwind-merge": "^2.5.5", "tailwind-merge": "^2.5.5",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"three": "^0.175.0",
"vaul": "^0.9.6", "vaul": "^0.9.6",
"zod": "^3.24.1" "zod": "^3.24.1"
}, },
"devDependencies": { "devDependencies": {
"@next/bundle-analyzer": "^15.4.1",
"@tailwindcss/typography": "^0.5.16", "@tailwindcss/typography": "^0.5.16",
"@types/lodash": "^4.17.16", "@types/lodash": "^4.17.16",
"@types/node": "^22", "@types/node": "^22",