diff --git a/src/app/admin/designs/[id]/edit/page.tsx b/src/app/admin/designs/[id]/edit/page.tsx
index 02b1b87..3eda67a 100644
--- a/src/app/admin/designs/[id]/edit/page.tsx
+++ b/src/app/admin/designs/[id]/edit/page.tsx
@@ -4,33 +4,14 @@ import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import dynamic from 'next/dynamic';
+import type { ProductDTO } from '@/lib/types';
interface DesignApproval {
id: string;
customerEmail: string;
customerName: string | null;
productId: string;
- product: {
- id: string;
- name: string;
- basePrice: number;
- personalisedPrice: number;
- onSale: boolean;
- effectivePrice: number;
- colors: string[];
- sizes: string[];
- showOnPersonalised: boolean;
- imageUrl: string | null;
- imageUrlBack: string | null;
- photoRecolorable: boolean;
- colorPhotos: Record;
- colorPhotosBack: Record;
- printArea: string;
- printAreaBack: string | null;
- mockup: string;
- referenceWidthCm: number | null;
- referenceHeightCm: number | null;
- };
+ product: ProductDTO;
designJson: string;
color: string;
size: string | null;
diff --git a/src/app/admin/designs/page.tsx b/src/app/admin/designs/page.tsx
index b3c6bc6..32968bc 100644
--- a/src/app/admin/designs/page.tsx
+++ b/src/app/admin/designs/page.tsx
@@ -4,7 +4,7 @@ import AdminNav from '@/components/AdminNav';
import DeleteDesignButton from '@/components/DeleteDesignButton';
export default async function DesignsPage() {
- let designs = [];
+ let designs: any[] = [];
try {
designs = await prisma.designApproval.findMany({
select: {
@@ -20,15 +20,15 @@ export default async function DesignsPage() {
});
// Fetch products separately to avoid relation issues
- const productIds = [...new Set(designs.map(d => d.productId))];
+ const productIds = [...new Set(designs.map((d: any) => d.productId))];
const products = await prisma.product.findMany({
where: { id: { in: productIds } },
select: { id: true, name: true },
});
- const productMap = Object.fromEntries(products.map(p => [p.id, p]));
+ const productMap = Object.fromEntries(products.map((p: any) => [p.id, p]));
// Add product to each design
- designs = designs.map(d => ({
+ designs = designs.map((d: any) => ({
...d,
product: productMap[d.productId],
messages: [],
@@ -37,9 +37,9 @@ export default async function DesignsPage() {
console.error('Error fetching designs:', err);
}
- const pending = designs.filter((d) => d.status === 'PENDING');
- const approved = designs.filter((d) => d.status === 'APPROVED');
- const rejected = designs.filter((d) => d.status === 'REJECTED');
+ const pending = designs.filter((d: any) => d.status === 'PENDING');
+ const approved = designs.filter((d: any) => d.status === 'APPROVED');
+ const rejected = designs.filter((d: any) => d.status === 'REJECTED');
const DesignList = ({ items, status }: { items: typeof designs; status: string }) => (
diff --git a/src/app/admin/login/actions.ts b/src/app/admin/login/actions.ts
index 39bc21d..71ca58e 100644
--- a/src/app/admin/login/actions.ts
+++ b/src/app/admin/login/actions.ts
@@ -17,8 +17,9 @@ export async function loginAdmin(formData: FormData) {
const password = String(formData.get('password') ?? '');
const next = safeNext(formData.get('next'));
- const ip = getClientIp(headers());
- const userAgent = headers().get('user-agent') ?? undefined;
+ const headersList = await headers();
+ const ip = getClientIp(headersList);
+ const userAgent = headersList.get('user-agent') ?? undefined;
const { allowed } = await checkRateLimit(`login:admin:${ip}`, 5, 15 * 60 * 1000);
if (!allowed) {
diff --git a/src/app/admin/login/page.tsx b/src/app/admin/login/page.tsx
index a959d56..82b72ab 100644
--- a/src/app/admin/login/page.tsx
+++ b/src/app/admin/login/page.tsx
@@ -5,9 +5,9 @@ const ERROR_MESSAGES: Record = {
rate_limited: 'Too many attempts — please wait a few minutes and try again.',
};
-export default function AdminLoginPage({ searchParams }: { searchParams: { error?: string; next?: string } }) {
- const error = searchParams.error ? (ERROR_MESSAGES[searchParams.error] ?? 'Something went wrong.') : null;
- const next = searchParams.next ?? '/admin/dashboard';
+export default async function AdminLoginPage({ searchParams }: { searchParams: Promise<{ error?: string; next?: string }> }) {
+ const { error: errorKey, next } = await searchParams;
+ const error = errorKey ? (ERROR_MESSAGES[errorKey] ?? 'Something went wrong.') : null;
return (
diff --git a/src/app/admin/orders/[id]/page.tsx b/src/app/admin/orders/[id]/page.tsx
index 2a49147..32f81ef 100644
--- a/src/app/admin/orders/[id]/page.tsx
+++ b/src/app/admin/orders/[id]/page.tsx
@@ -237,8 +237,9 @@ export default async function OrderDetailPage({ params }: { params: { id: string
{order.items.map((item) => {
let hasFrontDesign = false;
let hasBackDesign = false;
+ let design: { front: unknown[]; back: unknown[] } = { front: [], back: [] };
try {
- const design = JSON.parse(item.designJson) as { front: unknown[]; back: unknown[] };
+ design = JSON.parse(item.designJson) as { front: unknown[]; back: unknown[] };
hasFrontDesign = (design.front?.length ?? 0) > 0;
hasBackDesign = (design.back?.length ?? 0) > 0;
} catch {
diff --git a/src/app/admin/orders/page.tsx b/src/app/admin/orders/page.tsx
index 847950b..bfd723c 100644
--- a/src/app/admin/orders/page.tsx
+++ b/src/app/admin/orders/page.tsx
@@ -37,7 +37,7 @@ export default async function OrdersPage({ searchParams }: { searchParams: { arc
const pageSize = 50;
const skip = (page - 1) * pageSize;
- let orders = [];
+ let orders: any[] = [];
let total = 0;
try {
// Fetch orders and total count in parallel
@@ -80,8 +80,8 @@ export default async function OrdersPage({ searchParams }: { searchParams: { arc
// Filter to personalised orders if requested
if (showOnlyPersonalised) {
- orders = orders.filter((order) =>
- order.items.some((item) => {
+ orders = orders.filter((order: any) =>
+ order.items.some((item: any) => {
const design = JSON.parse(item.designJson) as { front: unknown[]; back: unknown[] };
return design.front.length > 0 || design.back.length > 0;
})
@@ -148,8 +148,8 @@ export default async function OrdersPage({ searchParams }: { searchParams: { arc
) : (
- {orders.map((order) => {
- const hasPersonalised = order.items.some((item) => {
+ {orders.map((order: any) => {
+ const hasPersonalised = order.items.some((item: any) => {
try {
const design = JSON.parse(item.designJson) as { front: unknown[]; back: unknown[] };
return (design.front?.length ?? 0) > 0 || (design.back?.length ?? 0) > 0;
diff --git a/src/app/admin/products/[id]/edit/page.tsx b/src/app/admin/products/[id]/edit/page.tsx
index da17f6b..7157fae 100644
--- a/src/app/admin/products/[id]/edit/page.tsx
+++ b/src/app/admin/products/[id]/edit/page.tsx
@@ -9,25 +9,22 @@ import SizePicker from '@/components/SizePicker';
import PhotoPrintAreaField, { type Box } from '@/components/PhotoPrintAreaField';
import CategoryPicker from '@/components/CategoryPicker';
-export default async function EditProductPage({ params }: { params: { id: string } }) {
+export default async function EditProductPage({ params }: { params: Promise<{ id: string }> }) {
+ const { id } = await params;
const activePromotions = await fetchActivePromotions();
- const row = await prisma.product.findUnique({ where: { id: params.id }, include: { collections: true } });
+ const row = await prisma.product.findUnique({ where: { id }, include: { collections: true } });
if (!row) notFound();
const product = toProductDTO(row, activePromotions);
const categories = await prisma.category.findMany({
where: { parentId: null },
orderBy: { name: 'asc' },
- select: {
- id: true,
- name: true,
- slug: true,
+ include: {
children: {
- select: { id: true, name: true, slug: true },
orderBy: { name: 'asc' },
},
},
- });
+ }) as any;
const collections = await prisma.collection.findMany({ orderBy: { name: 'asc' } });
const occasions = collections.filter((c) => c.group === 'OCCASION');
const recipients = collections.filter((c) => c.group === 'RECIPIENT');
@@ -49,6 +46,10 @@ export default async function EditProductPage({ params }: { params: { id: string
hPct: printAreaBack.hPct * 100,
} : undefined;
+ // Parse color photos for preview if no base image
+ const colorPhotos = row.colorPhotos ? JSON.parse(row.colorPhotos) : undefined;
+ const colorPhotosBack = row.colorPhotosBack ? JSON.parse(row.colorPhotosBack) : undefined;
+
return (
{showMaintenance ? (
diff --git a/src/app/made-to-order/[slug]/page.tsx b/src/app/made-to-order/[slug]/page.tsx
index fb11288..5924310 100644
--- a/src/app/made-to-order/[slug]/page.tsx
+++ b/src/app/made-to-order/[slug]/page.tsx
@@ -1,22 +1,22 @@
import { notFound } from 'next/navigation';
-import dynamic from 'next/dynamic';
import { prisma } from '@/lib/prisma';
import { toProductDTO } from '@/lib/product';
import { fetchActivePromotions } from '@/lib/promotions';
import ProductCard from '@/components/ProductCard';
-
-const DesignCanvas = dynamic(() => import('@/components/DesignCanvas'), { ssr: false });
+import DesignCanvasWrapper from '@/components/DesignCanvasWrapper';
export default async function ProductDetailPage({
params,
searchParams,
}: {
- params: { slug: string };
- searchParams: { customRequestId?: string };
+ params: Promise<{ slug: string }>;
+ searchParams: Promise<{ customRequestId?: string }>;
}) {
+ const { slug } = await params;
+ const { customRequestId } = await searchParams;
const activePromotions = await fetchActivePromotions();
- const row = await prisma.product.findUnique({ where: { slug: params.slug } });
+ const row = await prisma.product.findUnique({ where: { slug } });
if (!row || !row.showOnPersonalised) notFound();
const product = toProductDTO(row, activePromotions, 'personalised');
@@ -29,9 +29,9 @@ export default async function ProductDetailPage({
// Fetch custom photo from request if customRequestId is provided
let customPhoto: string | undefined;
- if (searchParams.customRequestId) {
+ if (customRequestId) {
const customRequest = await prisma.customRequest.findUnique({
- where: { id: searchParams.customRequestId },
+ where: { id: customRequestId },
});
if (customRequest) {
customPhoto = customRequest.imageDataUrl;
@@ -40,7 +40,7 @@ export default async function ProductDetailPage({
return (
diff --git a/src/components/DesignCanvasErrorBoundary.tsx b/src/components/DesignCanvasErrorBoundary.tsx
new file mode 100644
index 0000000..0c40b78
--- /dev/null
+++ b/src/components/DesignCanvasErrorBoundary.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import React, { ReactNode } from 'react';
+
+interface Props {
+ children: ReactNode;
+}
+
+interface State {
+ hasError: boolean;
+}
+
+class DesignCanvasErrorBoundary extends React.Component {
+ constructor(props: Props) {
+ super(props);
+ this.state = { hasError: false };
+ }
+
+ static getDerivedStateFromError() {
+ return { hasError: true };
+ }
+
+ render() {
+ if (this.state.hasError) {
+ return (
+ (null);
+ const frontCanvasRef = useRef(null);
+ const backCanvasRef = useRef(null);
+ const measureCanvasRef = useRef(null);
+ const [design, setDesign] = useState<{ front: DesignElement[]; back: DesignElement[] }>({
+ front: [],
+ back: [],
+ });
+ const [side, setSide] = useState<'front' | 'back'>('front');
+ const [showLoginPrompt, setShowLoginPrompt] = useState(false);
+ const [selectedId, setSelectedId] = useState(null);
+ const [pendingId, setPendingId] = useState(null);
+ const [selectedColor, setSelectedColor] = useState(product.colors[0]);
+ const [dragging, setDragging] = useState<{
+ id: string;
+ type: 'move' | 'resize-nw' | 'resize-ne' | 'resize-sw' | 'resize-se';
+ startX: number;
+ startY: number;
+ elementX: number;
+ elementY: number;
+ offsetX: number;
+ offsetY: number;
+ } | null>(null);
+
+ const { addItem } = useCart();
+
+ // Helper to measure text width
+ const measureTextWidth = (text: string, fontSize: number, fontFamily: string): number => {
+ if (!measureCanvasRef.current) {
+ measureCanvasRef.current = document.createElement('canvas');
+ }
+ const ctx = measureCanvasRef.current.getContext('2d');
+ if (!ctx) return text.length * (fontSize * 0.6); // Fallback estimate
+ ctx.font = `${fontSize}px ${fontFamily}`;
+ return ctx.measureText(text).width;
+ };
+
+ // Validate element stays within design area
+ const validateElementBounds = useCallback((element: DesignElement, printArea: any): DesignElement => {
+ const minX = Math.round(printArea.xPct * DISPLAY);
+ const minY = Math.round(printArea.yPct * DISPLAY);
+ const maxX = minX + Math.round(printArea.wPct * DISPLAY);
+ const maxY = minY + Math.round(printArea.hPct * DISPLAY);
+
+ const elementWidth = element.type === 'text' ? 150 : element.width;
+ const elementHeight = element.type === 'text' ? element.fontSize : element.height;
+
+ return {
+ ...element,
+ x: Math.max(minX, Math.min(element.x, maxX - elementWidth)),
+ y: Math.max(minY, Math.min(element.y, maxY - elementHeight)),
+ };
+ }, []);
+
+ // Reset design state when product changes
+ useEffect(() => {
+ setDesign({ front: [], back: [] });
+ setSide('front');
+ setSelectedId(null);
+ setPendingId(null);
+ }, [product.id]);
+
+ // Clear selection and pending when switching views
+ useEffect(() => {
+ setSelectedId(null);
+ setPendingId(null);
+ }, [side]);
+
+ // Redraw canvas whenever design, selection, or dragging changes (for dynamic updates)
+ useEffect(() => {
+ const canvas = side === 'front' ? frontCanvasRef.current : backCanvasRef.current;
+ if (!canvas) return;
+
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+
+ // Clear canvas
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Get print area and validate all elements before drawing
+ const printArea = side === 'front' ? product.printArea : product.printAreaBack || product.printArea;
+ const elements = side === 'front' ? design.front : design.back;
+
+ elements.forEach((el) => {
+ // Validate element bounds before drawing
+ const validatedEl = validateElementBounds(el, printArea);
+ if (validatedEl.type === 'text') {
+ ctx.font = `${validatedEl.fontSize}px ${validatedEl.fontFamily}`;
+ ctx.fillStyle = validatedEl.fill;
+ ctx.textBaseline = 'top';
+ ctx.save();
+ ctx.translate(validatedEl.x, validatedEl.y);
+ ctx.rotate(((validatedEl.rotation || 0) * Math.PI) / 180);
+ ctx.fillText(validatedEl.text, 0, 0);
+ ctx.restore();
+
+ // Draw selection box and resize handles if selected
+ if (selectedId === validatedEl.id) {
+ const textWidth = ctx.measureText(validatedEl.text).width;
+ const textHeight = validatedEl.fontSize;
+
+ ctx.strokeStyle = '#FF6B6B';
+ ctx.lineWidth = 2;
+ ctx.strokeRect(validatedEl.x - 5, validatedEl.y - 5, textWidth + 10, textHeight + 10);
+
+ // Draw resize handles
+ const handleSize = 8;
+ const handles = [
+ { x: validatedEl.x - handleSize / 2, y: validatedEl.y - handleSize / 2 }, // top-left
+ { x: validatedEl.x + textWidth + handleSize / 2, y: validatedEl.y - handleSize / 2 }, // top-right
+ { x: validatedEl.x - handleSize / 2, y: validatedEl.y + textHeight + handleSize / 2 }, // bottom-left
+ { x: validatedEl.x + textWidth + handleSize / 2, y: validatedEl.y + textHeight + handleSize / 2 }, // bottom-right
+ ];
+
+ handles.forEach((handle) => {
+ ctx.fillStyle = '#FF6B6B';
+ ctx.fillRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+ ctx.strokeStyle = '#fff';
+ ctx.lineWidth = 1;
+ ctx.strokeRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+ });
+ }
+ } else if (validatedEl.type === 'image') {
+ const img = new Image();
+ img.onload = () => {
+ ctx.save();
+ ctx.translate(validatedEl.x, validatedEl.y);
+ ctx.rotate(((validatedEl.rotation || 0) * Math.PI) / 180);
+ ctx.drawImage(img, 0, 0, validatedEl.width, validatedEl.height);
+
+ // Draw selection box if selected
+ if (selectedId === validatedEl.id) {
+ ctx.strokeStyle = '#FF6B6B';
+ ctx.lineWidth = 2;
+ ctx.strokeRect(-5, -5, validatedEl.width + 10, validatedEl.height + 10);
+
+ // Draw resize handles
+ const handleSize = 8;
+ const handles = [
+ { x: -handleSize / 2, y: -handleSize / 2 }, // top-left
+ { x: validatedEl.width + handleSize / 2, y: -handleSize / 2 }, // top-right
+ { x: -handleSize / 2, y: validatedEl.height + handleSize / 2 }, // bottom-left
+ { x: validatedEl.width + handleSize / 2, y: validatedEl.height + handleSize / 2 }, // bottom-right
+ ];
+
+ handles.forEach((handle) => {
+ ctx.fillStyle = '#FF6B6B';
+ ctx.fillRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+ ctx.strokeStyle = '#fff';
+ ctx.lineWidth = 1;
+ ctx.strokeRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+ });
+ }
+
+ ctx.restore();
+ };
+ img.src = validatedEl.src;
+ }
+ });
+ }, [design, side, selectedId, product, dragging]);
+
+ const addTextElement = useCallback(() => {
+ const id = uuid();
+
+ // Calculate initial position centered in the print area
+ const printArea = side === 'front' ? product.printArea : product.printAreaBack || product.printArea;
+ const minX = Math.round(printArea.xPct * DISPLAY);
+ const minY = Math.round(printArea.yPct * DISPLAY);
+ const printWidth = Math.round(printArea.wPct * DISPLAY);
+ const printHeight = Math.round(printArea.hPct * DISPLAY);
+
+ // Measure actual text width
+ const fontSize = 24;
+ const textWidth = measureTextWidth('New Text', fontSize, 'Arial');
+
+ // Center horizontally and vertically in print area
+ const centerX = minX + Math.round((printWidth - textWidth) / 2);
+ const centerY = minY + Math.round((printHeight - fontSize) / 2);
+
+ const newElement: DesignElement = {
+ id,
+ type: 'text',
+ text: 'New Text',
+ x: Math.max(minX, centerX),
+ y: Math.max(minY, centerY),
+ fontSize,
+ fontFamily: 'Arial',
+ fill: '#000000',
+ rotation: 0,
+ };
+
+ setDesign((prev) => ({
+ ...prev,
+ [side]: [...prev[side], newElement],
+ }));
+ setSelectedId(id);
+ setPendingId(id);
+ }, [side, product]);
+
+ const updateElement = useCallback(
+ (id: string, updates: Partial) => {
+ setDesign((prev) => ({
+ ...prev,
+ [side]: prev[side].map((el) =>
+ el.id === id ? { ...el, ...updates } : el
+ ),
+ }));
+ },
+ [side]
+ );
+
+ const addImageElement = useCallback(() => {
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.accept = 'image/*';
+ input.onchange = (e) => {
+ const file = (e.target as HTMLInputElement).files?.[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (evt) => {
+ const id = uuid();
+ const newElement: DesignElement = {
+ id,
+ type: 'image',
+ src: evt.target?.result as string,
+ x: 50,
+ y: 50,
+ width: 100,
+ height: 100,
+ rotation: 0,
+ };
+ setDesign((prev) => ({
+ ...prev,
+ [side]: [...prev[side], newElement],
+ }));
+ setSelectedId(id);
+ setPendingId(id);
+ };
+ reader.readAsDataURL(file);
+ }
+ };
+ input.click();
+ }, [side]);
+
+ const confirmElement = useCallback(() => {
+ setPendingId(null);
+ }, []);
+
+ const cancelElement = useCallback(() => {
+ if (!pendingId) return;
+ setDesign((prev) => ({
+ ...prev,
+ [side]: prev[side].filter((el) => el.id !== pendingId),
+ }));
+ setSelectedId(null);
+ setPendingId(null);
+ }, [pendingId, side]);
+
+ const deleteElement = useCallback(
+ (id: string) => {
+ setDesign((prev) => ({
+ ...prev,
+ [side]: prev[side].filter((el) => el.id !== id),
+ }));
+ setSelectedId(null);
+ },
+ [side]
+ );
+
+ const handleCanvasClick = useCallback(
+ (e: React.MouseEvent) => {
+ const canvas = e.currentTarget;
+ const rect = canvas.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+
+ const elements = side === 'front' ? design.front : design.back;
+ let clicked = false;
+
+ for (const el of elements) {
+ if (el.type === 'text') {
+ if (x >= el.x && x <= el.x + 200 && y >= el.y && y <= el.y + el.fontSize + 10) {
+ setSelectedId(el.id);
+ setPendingId(null);
+ clicked = true;
+ break;
+ }
+ } else if (el.type === 'image') {
+ if (x >= el.x && x <= el.x + el.width && y >= el.y && y <= el.y + el.height) {
+ setSelectedId(el.id);
+ setPendingId(null);
+ clicked = true;
+ break;
+ }
+ }
+ }
+
+ if (!clicked) {
+ setSelectedId(null);
+ setPendingId(null);
+ }
+ },
+ [design, side]
+ );
+
+ const handleCanvasMouseDown = useCallback(
+ (e: React.MouseEvent) => {
+ if (!selectedId) return;
+
+ const canvas = e.currentTarget;
+ const rect = canvas.getBoundingClientRect();
+ const clickX = e.clientX - rect.left;
+ const clickY = e.clientY - rect.top;
+
+ const elements = side === 'front' ? design.front : design.back;
+ const element = elements.find((el) => el.id === selectedId);
+ if (!element) return;
+
+ // Determine if clicking on a resize handle or the element itself
+ let dragType: 'move' | 'resize-nw' | 'resize-ne' | 'resize-sw' | 'resize-se' = 'move';
+
+ if (element.type === 'text') {
+ const textWidth = measureTextWidth(element.text, element.fontSize, element.fontFamily);
+ const textHeight = element.fontSize;
+ const handleSize = 8;
+
+ // Check if click is within handleSize of each corner
+ const nearTopLeft = Math.abs(clickX - element.x) < handleSize && Math.abs(clickY - element.y) < handleSize;
+ const nearTopRight = Math.abs(clickX - (element.x + textWidth)) < handleSize && Math.abs(clickY - element.y) < handleSize;
+ const nearBottomLeft = Math.abs(clickX - element.x) < handleSize && Math.abs(clickY - (element.y + textHeight)) < handleSize;
+ const nearBottomRight = Math.abs(clickX - (element.x + textWidth)) < handleSize && Math.abs(clickY - (element.y + textHeight)) < handleSize;
+
+ if (nearTopLeft) dragType = 'resize-nw';
+ else if (nearTopRight) dragType = 'resize-ne';
+ else if (nearBottomLeft) dragType = 'resize-sw';
+ else if (nearBottomRight) dragType = 'resize-se';
+ } else if (element.type === 'image') {
+ const handleSize = 10;
+
+ // Check if click is within handleSize of each corner
+ const nearTopLeft = Math.abs(clickX - element.x) < handleSize && Math.abs(clickY - element.y) < handleSize;
+ const nearTopRight = Math.abs(clickX - (element.x + element.width)) < handleSize && Math.abs(clickY - element.y) < handleSize;
+ const nearBottomLeft = Math.abs(clickX - element.x) < handleSize && Math.abs(clickY - (element.y + element.height)) < handleSize;
+ const nearBottomRight = Math.abs(clickX - (element.x + element.width)) < handleSize && Math.abs(clickY - (element.y + element.height)) < handleSize;
+
+ if (nearTopLeft) dragType = 'resize-nw';
+ else if (nearTopRight) dragType = 'resize-ne';
+ else if (nearBottomLeft) dragType = 'resize-sw';
+ else if (nearBottomRight) dragType = 'resize-se';
+ }
+
+ setDragging({
+ id: selectedId,
+ type: dragType,
+ startX: clickX,
+ startY: clickY,
+ elementX: element.x,
+ elementY: element.y,
+ offsetX: element.x - clickX,
+ offsetY: element.y - clickY,
+ });
+ },
+ [selectedId, side, design]
+ );
+
+ const handleMouseMove = useCallback(
+ (e: MouseEvent) => {
+ if (!dragging) return;
+
+ const canvas = side === 'front' ? frontCanvasRef.current : backCanvasRef.current;
+ if (!canvas) return;
+
+ const rect = canvas.getBoundingClientRect();
+ const currentX = e.clientX - rect.left;
+ const currentY = e.clientY - rect.top;
+
+ const elements = side === 'front' ? design.front : design.back;
+ const element = elements.find((el) => el.id === dragging.id);
+
+ if (element) {
+ // Calculate print area bounds
+ const printArea = side === 'front' ? product.printArea : product.printAreaBack || product.printArea;
+ const minX = Math.round(printArea.xPct * DISPLAY);
+ const minY = Math.round(printArea.yPct * DISPLAY);
+ const maxX = minX + Math.round(printArea.wPct * DISPLAY);
+ const maxY = minY + Math.round(printArea.hPct * DISPLAY);
+ const printAreaWidth = maxX - minX;
+ const printAreaHeight = maxY - minY;
+
+ if (dragging.type === 'move') {
+ // Position element based on initial element position + mouse delta
+ const dx = currentX - dragging.startX;
+ const dy = currentY - dragging.startY;
+
+ let newX = dragging.elementX + dx;
+ let newY = dragging.elementY + dy;
+
+ // Constrain to print area boundaries - ensure element stays fully inside
+ let elementWidth = element.width || 0;
+ let elementHeight = element.height || element.fontSize || 0;
+
+ // For text, measure actual width
+ if (element.type === 'text') {
+ elementWidth = measureTextWidth(element.text, element.fontSize, element.fontFamily) + 10;
+ elementHeight = element.fontSize * 1.2; // Account for line height
+ }
+
+ // Constrain to print area - allow some overflow if element is too large
+ // X-axis: keep left edge from going too far left, but allow right to extend
+ const maxLeftX = maxX - 20; // Allow small overlap on right
+ newX = Math.max(minX - elementWidth + 20, Math.min(newX, maxLeftX));
+
+ // Y-axis: similar approach
+ const maxTopY = maxY - 10;
+ newY = Math.max(minY - elementHeight + 10, Math.min(newY, maxTopY));
+
+ updateElement(dragging.id, { x: newX, y: newY });
+ } else if (element.type === 'text') {
+ // Resize text by changing font size based on vertical drag
+ const dy = currentY - dragging.startY;
+ const newSize = Math.max(8, Math.min(72, element.fontSize + Math.round(dy / 10)));
+ updateElement(dragging.id, { fontSize: newSize });
+ } else if (element.type === 'image') {
+ // Resize image from corners with proper boundary handling
+ const dx = currentX - dragging.startX;
+ const dy = currentY - dragging.startY;
+
+ let newX = element.x;
+ let newY = element.y;
+ let newWidth = element.width;
+ let newHeight = element.height;
+
+ // Handle corner-specific resize logic
+ if (dragging.type === 'resize-se') {
+ // Southeast: expand right and down
+ newWidth = Math.max(20, element.width + Math.round(dx / 2));
+ newHeight = Math.max(20, element.height + Math.round(dy / 2));
+ } else if (dragging.type === 'resize-sw') {
+ // Southwest: expand left and down
+ newX = element.x + Math.round(dx / 2);
+ newWidth = Math.max(20, element.width - Math.round(dx / 2));
+ newHeight = Math.max(20, element.height + Math.round(dy / 2));
+ } else if (dragging.type === 'resize-ne') {
+ // Northeast: expand right and up
+ newY = element.y + Math.round(dy / 2);
+ newWidth = Math.max(20, element.width + Math.round(dx / 2));
+ newHeight = Math.max(20, element.height - Math.round(dy / 2));
+ } else if (dragging.type === 'resize-nw') {
+ // Northwest: expand left and up
+ newX = element.x + Math.round(dx / 2);
+ newY = element.y + Math.round(dy / 2);
+ newWidth = Math.max(20, element.width - Math.round(dx / 2));
+ newHeight = Math.max(20, element.height - Math.round(dy / 2));
+ }
+
+ // Constrain to print area boundaries
+ newX = Math.max(minX, Math.min(newX, maxX - 20));
+ newY = Math.max(minY, Math.min(newY, maxY - 20));
+ newWidth = Math.min(newWidth, maxX - newX);
+ newHeight = Math.min(newHeight, maxY - newY);
+
+ updateElement(dragging.id, { x: newX, y: newY, width: newWidth, height: newHeight });
+ }
+ }
+ },
+ [dragging, side, design, product, updateElement]
+ );
+
+ const handleMouseUp = useCallback(() => {
+ setDragging(null);
+ }, []);
+
+ useEffect(() => {
+ if (dragging) {
+ window.addEventListener('mousemove', handleMouseMove);
+ window.addEventListener('mouseup', handleMouseUp);
+ return () => {
+ window.removeEventListener('mousemove', handleMouseMove);
+ window.removeEventListener('mouseup', handleMouseUp);
+ };
+ }
+ }, [dragging, handleMouseMove, handleMouseUp]);
+
+ const selectedElement = selectedId
+ ? (side === 'front' ? design.front : design.back).find((el) => el.id === selectedId)
+ : null;
+
+ const printArea = side === 'front' ? product.printArea : product.printAreaBack || product.printArea;
+ const canvasW = Math.round(printArea.wPct * DISPLAY);
+ const canvasH = Math.round(printArea.hPct * DISPLAY);
+
+ const handleAddToCart = async () => {
+ const customer = await checkCustomerAuth();
+ if (!customer) {
+ setShowLoginPrompt(true);
+ return;
+ }
+
+ const priceInfo = getEffectivePrice(product, [], new Date(), 'personalised');
+ addItem({
+ productId: product.id,
+ quantity: 1,
+ designJson: JSON.stringify(design),
+ designWidthCm: product.referenceWidthCm || null,
+ designHeightCm: product.referenceHeightCm || null,
+ price: priceInfo.price,
+ });
+ };
+
+ return (
+
-
-
diff --git a/src/app/admin/products/actions.ts b/src/app/admin/products/actions.ts
index c2651da..58715cc 100644
--- a/src/app/admin/products/actions.ts
+++ b/src/app/admin/products/actions.ts
@@ -276,10 +276,10 @@ export async function updateProduct(formData: FormData) {
referenceWidthCm: number | null;
referenceHeightCm: number | null;
weightGrams: number | null;
- imageUrl?: string;
- imageUrlBack?: string;
+ imageUrl?: string | null;
+ imageUrlBack?: string | null;
printArea?: string;
- printAreaBack?: string;
+ printAreaBack?: string | null;
} = {
name,
category,
diff --git a/src/app/admin/products/new/page.tsx b/src/app/admin/products/new/page.tsx
index 9cfcf94..59e8893 100644
--- a/src/app/admin/products/new/page.tsx
+++ b/src/app/admin/products/new/page.tsx
@@ -10,16 +10,12 @@ export default async function NewProductPage() {
const categories = await prisma.category.findMany({
where: { parentId: null },
orderBy: { name: 'asc' },
- select: {
- id: true,
- name: true,
- slug: true,
+ include: {
children: {
- select: { id: true, name: true, slug: true },
orderBy: { name: 'asc' },
},
},
- });
+ }) as any;
const collections = await prisma.collection.findMany({ orderBy: { name: 'asc' } });
const occasions = collections.filter((c) => c.group === 'OCCASION');
const recipients = collections.filter((c) => c.group === 'RECIPIENT');
diff --git a/src/app/admin/products/page.tsx b/src/app/admin/products/page.tsx
index a92958e..13c0569 100644
--- a/src/app/admin/products/page.tsx
+++ b/src/app/admin/products/page.tsx
@@ -9,13 +9,14 @@ import { deleteProduct } from './actions';
export default async function AdminProductsPage({
searchParams,
}: {
- searchParams: { error?: string };
+ searchParams: Promise<{ error?: string }>;
}) {
+ const { error } = await searchParams;
const activePromotions = await fetchActivePromotions();
- let products = [];
+ let products: any[] = [];
try {
const rows = await prisma.product.findMany();
- products = rows.map((p) => toProductDTO(p, activePromotions)).sort((a, b) =>
+ products = rows.map((p: any) => toProductDTO(p, activePromotions)).sort((a: any, b: any) =>
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
);
} catch (err) {
@@ -35,7 +36,7 @@ export default async function AdminProductsPage({
- {searchParams.error === 'in_use' && (
+ {error === 'in_use' && (
Can't delete that product — it has existing orders or design proofs tied to it.
diff --git a/src/app/api/checkout/route.ts b/src/app/api/checkout/route.ts
index d71b776..12f60f4 100644
--- a/src/app/api/checkout/route.ts
+++ b/src/app/api/checkout/route.ts
@@ -130,7 +130,7 @@ export async function POST(req: Request) {
// Calculate shipping cost (skip for collection orders)
let shippingCost = 0;
- let selectedShippingService = shippingService;
+ let selectedShippingService: string | undefined | null = shippingService;
if (isCollection) {
console.log('Collection order - no shipping cost');
@@ -193,7 +193,7 @@ export async function POST(req: Request) {
email: guest?.email ?? customer?.email,
guestName: guest?.name,
guestPhone: guest?.phone,
- isCollectionPickup,
+ isCollectionPickup: isCollection,
items: {
create: pricedItems.map((i) => ({
productId: i.productId,
diff --git a/src/app/api/designs/[id]/approve/route.ts b/src/app/api/designs/[id]/approve/route.ts
index 8f5d993..1e46dda 100644
--- a/src/app/api/designs/[id]/approve/route.ts
+++ b/src/app/api/designs/[id]/approve/route.ts
@@ -5,14 +5,15 @@ import { toProductDTO } from '@/lib/product';
export async function POST(
req: Request,
- { params }: { params: { id: string } }
+ { params }: { params: Promise<{ id: string }> }
) {
try {
+ const { id } = await params;
const body = await req.json();
const { expectedDeliveryDate } = body;
const design = await prisma.designApproval.findUnique({
- where: { id: params.id },
+ where: { id },
include: { product: true },
});
@@ -21,7 +22,7 @@ export async function POST(
}
const updated = await prisma.designApproval.update({
- where: { id: params.id },
+ where: { id },
data: {
status: 'APPROVED',
expectedDeliveryDate: expectedDeliveryDate ? new Date(expectedDeliveryDate) : null,
diff --git a/src/app/api/designs/[id]/messages/route.ts b/src/app/api/designs/[id]/messages/route.ts
index 9334425..e9533be 100644
--- a/src/app/api/designs/[id]/messages/route.ts
+++ b/src/app/api/designs/[id]/messages/route.ts
@@ -4,11 +4,12 @@ import type { DesignApprovalMessage } from '@prisma/client';
export async function GET(
req: Request,
- { params }: { params: { id: string } }
+ { params }: { params: Promise<{ id: string }> }
) {
try {
+ const { id } = await params;
const messages = await prisma.designApprovalMessage.findMany({
- where: { designId: params.id },
+ where: { designId: id },
orderBy: { createdAt: 'asc' },
});
@@ -24,9 +25,10 @@ export async function GET(
export async function POST(
req: Request,
- { params }: { params: { id: string } }
+ { params }: { params: Promise<{ id: string }> }
) {
try {
+ const { id } = await params;
const { sender, body, role, message, messageType } = await req.json();
// Support both old format (sender/body) and new format (role/message/messageType)
@@ -43,7 +45,7 @@ export async function POST(
const created = await prisma.designApprovalMessage.create({
data: {
- designId: params.id,
+ designId: id,
sender: finalSender,
body: finalBody,
messageType: finalMessageType,
diff --git a/src/app/api/designs/[id]/modify/route.ts b/src/app/api/designs/[id]/modify/route.ts
index 8cca751..846c181 100644
--- a/src/app/api/designs/[id]/modify/route.ts
+++ b/src/app/api/designs/[id]/modify/route.ts
@@ -3,9 +3,10 @@ import { prisma } from '@/lib/prisma';
export async function POST(
req: Request,
- { params }: { params: { id: string } }
+ { params }: { params: Promise<{ id: string }> }
) {
try {
+ const { id } = await params;
const {
designJson,
designPreviewUrl,
@@ -17,7 +18,7 @@ export async function POST(
} = await req.json();
const design = await prisma.designApproval.findUnique({
- where: { id: params.id },
+ where: { id: id },
});
if (!design) {
@@ -25,7 +26,7 @@ export async function POST(
}
const updated = await prisma.designApproval.update({
- where: { id: params.id },
+ where: { id: id },
data: {
...(designJson && { designJson }),
...(designPreviewUrl && { designPreviewUrl }),
diff --git a/src/app/api/designs/[id]/route.ts b/src/app/api/designs/[id]/route.ts
index 77ac59c..7ebcfda 100644
--- a/src/app/api/designs/[id]/route.ts
+++ b/src/app/api/designs/[id]/route.ts
@@ -5,11 +5,12 @@ import { toProductDTO } from '@/lib/product';
export async function GET(
req: Request,
- { params }: { params: { id: string } }
+ { params }: { params: Promise<{ id: string }> }
) {
try {
+ const { id } = await params;
const design = await prisma.designApproval.findUnique({
- where: { id: params.id },
+ where: { id },
include: { product: true, messages: { orderBy: { createdAt: 'asc' } } },
});
@@ -32,9 +33,10 @@ export async function GET(
export async function PATCH(
req: Request,
- { params }: { params: { id: string } }
+ { params }: { params: Promise<{ id: string }> }
) {
try {
+ const { id } = await params;
const customer = await getCurrentCustomer();
if (!customer) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
@@ -43,7 +45,7 @@ export async function PATCH(
const { status } = await req.json();
const updated = await prisma.designApproval.update({
- where: { id: params.id },
+ where: { id },
data: { status },
include: { product: true, messages: { orderBy: { createdAt: 'asc' } } },
});
@@ -63,17 +65,18 @@ export async function PATCH(
export async function DELETE(
req: Request,
- { params }: { params: { id: string } }
+ { params }: { params: Promise<{ id: string }> }
) {
try {
+ const { id } = await params;
// Delete associated messages first
await prisma.designApprovalMessage.deleteMany({
- where: { designId: params.id },
+ where: { designId: id },
});
// Delete the design approval
await prisma.designApproval.delete({
- where: { id: params.id },
+ where: { id: id },
});
return NextResponse.json({ success: true });
diff --git a/src/app/api/designs/[id]/send-to-customer/route.ts b/src/app/api/designs/[id]/send-to-customer/route.ts
index 2df0d71..362a9fe 100644
--- a/src/app/api/designs/[id]/send-to-customer/route.ts
+++ b/src/app/api/designs/[id]/send-to-customer/route.ts
@@ -4,13 +4,14 @@ import { sendDesignReadyForReview } from '@/lib/mail';
export async function POST(
req: Request,
- { params }: { params: { id: string } }
+ { params }: { params: Promise<{ id: string }> }
) {
try {
+ const { id } = await params;
const { designPreviewUrl, designPreviewUrlBack, placementPreviewUrl, placementPreviewUrlBack } = await req.json().catch(() => ({}));
const design = await prisma.designApproval.findUnique({
- where: { id: params.id },
+ where: { id: id },
include: { product: true },
});
@@ -26,7 +27,7 @@ export async function POST(
if (placementPreviewUrlBack) updateData.placementPreviewUrlBack = placementPreviewUrlBack;
const updated = await prisma.designApproval.update({
- where: { id: params.id },
+ where: { id: id },
data: updateData,
include: { product: true, messages: { orderBy: { createdAt: 'asc' } } },
});
@@ -36,7 +37,7 @@ export async function POST(
customerName: design.customerName || 'Customer',
customerEmail: design.customerEmail,
productName: design.product.name,
- reviewLink: `${process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'}/designs/${params.id}/review`,
+ reviewLink: `${process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'}/designs/${id}/review`,
});
return NextResponse.json(updated);
diff --git a/src/app/api/orders/[id]/design-spec/route.ts b/src/app/api/orders/[id]/design-spec/route.ts
index b7eaf80..f8dfde3 100644
--- a/src/app/api/orders/[id]/design-spec/route.ts
+++ b/src/app/api/orders/[id]/design-spec/route.ts
@@ -1,9 +1,9 @@
import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
-export async function GET(req: Request, { params }: { params: { id: string } }) {
+export async function GET(req: Request, { params }: { params: Promise<{ id: string }> }) {
try {
- const { id } = params;
+ const { id } = await params;
const order = await prisma.order.findUnique({
where: { id },
include: { items: true },
@@ -292,7 +292,7 @@ export async function GET(req: Request, { params }: { params: { id: string } })
${item.designImageDimensions ? (() => {
try {
const imageDims = JSON.parse(item.designImageDimensions);
- return imageDims && imageDims.length > 0 ? `Image Dimensions:
- ${imageDims.map((img, idx) => `
- Image ${idx + 1}: ${img.widthCm} cm × ${img.heightCm} cm `).join('')}
Image Dimensions:
- ${imageDims.map((img: any, idx: any) => `
- Image ${idx + 1}: ${img.widthCm} cm × ${img.heightCm} cm `).join('')}
-
diff --git a/src/app/made-to-order/page.tsx b/src/app/made-to-order/page.tsx
index 0712158..0537e17 100644
--- a/src/app/made-to-order/page.tsx
+++ b/src/app/made-to-order/page.tsx
@@ -9,8 +9,9 @@ type SearchParams = {
const PRODUCTS_PER_PAGE = 20;
-export default async function ProductsPage({ searchParams }: { searchParams: SearchParams }) {
- const currentPage = Math.max(1, Number(searchParams.page) || 1);
+export default async function ProductsPage({ searchParams }: { searchParams: Promise }) {
+ const { page } = await searchParams;
+ const currentPage = Math.max(1, Number(page) || 1);
const activePromotions = await fetchActivePromotions();
const [rows, totalCount] = await Promise.all([
diff --git a/src/components/AdminDesignEditor.tsx b/src/components/AdminDesignEditor.tsx
index 8f8401b..25140a4 100644
--- a/src/components/AdminDesignEditor.tsx
+++ b/src/components/AdminDesignEditor.tsx
@@ -2,7 +2,7 @@
import { useRef, useState, useEffect } from 'react';
import { Stage, Layer, Text, Image as KonvaImage, Transformer } from 'react-konva';
-import type Konva from 'konva';
+import Konva from 'konva';
import type { DesignElement } from '@/lib/types';
interface AdminDesignEditorProps {
diff --git a/src/components/ApproveSection.tsx b/src/components/ApproveSection.tsx
index ec400a0..d7f199d 100644
--- a/src/components/ApproveSection.tsx
+++ b/src/components/ApproveSection.tsx
@@ -26,11 +26,13 @@ export default function ApproveSection({ proof }: { proof: ProofDTO }) {
size: null,
quantity: proof.quantity,
unitPrice: proof.unitPrice,
- designJson: { front: [], back: [] },
+ designJson: { front: [], back: [] } as any,
designPreviewUrl: proof.imageDataUrl,
designPreviewUrlBack: null,
placementPreviewUrl: proof.imageDataUrl,
placementPreviewUrlBack: null,
+ designWidthCm: null,
+ designHeightCm: null,
});
setStatus('APPROVED');
router.push('/cart');
diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index 0c10706..9ed3e01 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -325,12 +325,13 @@ function PrintSurface({
/>
{elements.map((el) =>
el.type === 'text' ? (
- el.curvedPath ? (
+ (el as any).curvedPath ? (
// Curved text - TextPath with dragging via offset
(() => {
+ const elAny = el as any;
const offsetX = el.x - 280;
const offsetY = el.y - 280;
- const pathData = generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse, offsetX, offsetY);
+ const pathData = generateCurvePath(elAny.curvedPath.type, elAny.curvedPath.radius, elAny.curvedPath.reverse, offsetX, offsetY);
console.log(`🔄 Rendering curved text ${el.text}: position (${el.x}, ${el.y}), offset (${offsetX}, ${offsetY})`);
return (
@@ -1493,20 +1494,24 @@ export default function DesignCanvas({
- {text.curvedPath && (
+ {(text as any).curvedPath && (
)}
+ {(() => {
+ const textAny = text as any;
+ return (
+ <>
+
+ );
+ })()}
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
+
+export default DesignCanvasErrorBoundary;
diff --git a/src/components/FabricDesignCanvas.tsx b/src/components/FabricDesignCanvas.tsx
new file mode 100644
index 0000000..97cecf2
--- /dev/null
+++ b/src/components/FabricDesignCanvas.tsx
@@ -0,0 +1,881 @@
+'use client';
+
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { v4 as uuid } from 'uuid';
+import ProductMockup from './ProductMockup';
+import Price from './Price';
+import LoginPromptModal from './LoginPromptModal';
+import { useCart } from '@/lib/cartStore';
+import { getEffectivePrice } from '@/lib/pricing';
+import { checkCustomerAuth } from '@/app/actions';
+import type { DesignElement, ProductDTO } from '@/lib/types';
+
+const DISPLAY = 560;
+const FONTS = ['Arial', 'Georgia', 'Courier New', 'Times New Roman', 'Verdana', 'Comic Sans MS'];
+
+interface DesignCanvasProps {
+ product: ProductDTO;
+ customPhoto?: string;
+}
+
+export default function FabricDesignCanvas({ product, customPhoto }: DesignCanvasProps) {
+ const canvasContainerRef = useRef
+
+ Design Canvas Loading...
+Please refresh the page if this persists
+
+ {showLoginPrompt && setShowLoginPrompt(false)} />}
+
+
+ );
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e8dd54a..82e29c2 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,10 +1,12 @@
+'use client';
+
import Image from 'next/image';
import Link from 'next/link';
import NewsletterForm from './NewsletterForm';
export default function Footer() {
return (
-
+
+ Design Canvas
+ +
+ {/* Canvas */}
+
+
+ {/* Add to Cart */}
+
+
+
+ {/* Properties Panel */}
+
+
+
+
+
+ {/* Color Picker */}
+ {product.colors.length > 1 && (
+
+ Garment Color:
+
+ )}
+
+
+ {product.colors.map((color) => (
+
+
+
+
+
+ {/* Product image - prioritize colorPhotos over imageUrl */}
+ {customPhoto && side === 'front' ? (
+ 
+ ) : side === 'front' && product.colorPhotos?.[selectedColor] && product.colorPhotos[selectedColor] !== product.imageUrl ? (
+ 
+ ) : side === 'front' && product.imageUrl ? (
+ 
+ ) : side === 'back' && product.colorPhotosBack?.[selectedColor] ? (
+ 
+ ) : side === 'back' && product.imageUrlBack && product.imageUrlBack !== product.imageUrl ? (
+ 
+ ) : side === 'back' && product.colorPhotos?.[selectedColor] ? (
+
+ ) : side === 'back' && product.imageUrl ? (
+
+ ) : (
+
+
+
+
+
+
+
+ Properties
+
+ {selectedElement ? (
+ <>
+
+
+
+
+ {selectedElement.type === 'text' && (
+ <>
+
+ {selectedElement.type === 'text' ? 'Text' : 'Image'}
+
+
+
+ updateElement(selectedElement.id, { text: e.target.value })}
+ className="w-full text-xs border border-line rounded px-2 py-1 mt-1 text-ink"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ updateElement(selectedElement.id, { fontSize: parseInt(e.target.value) })}
+ className="flex-1 text-xs border border-line rounded px-2 py-1 text-ink"
+ min="8"
+ max="72"
+ />
+ px
+
+ Drag corners on canvas to resize
+
+
+ updateElement(selectedElement.id, { fill: e.target.value })}
+ className="w-full h-8 border border-line rounded mt-1 cursor-pointer"
+ />
+
+
+ )}
+
+ {selectedElement.type === 'image' && (
+ <>
+
+
+ updateElement(selectedElement.id, { width: parseInt(e.target.value) })}
+ className="w-full text-xs border border-line rounded px-2 py-1 mt-1 text-ink"
+ min="20"
+ max="300"
+ />
+
+
+
+
+ updateElement(selectedElement.id, { height: parseInt(e.target.value) })}
+ className="w-full text-xs border border-line rounded px-2 py-1 mt-1 text-ink"
+ min="20"
+ max="300"
+ />
+
+
+ Drag corners on canvas to resize
+ + )} + + {pendingId === selectedElement.id && ( +
+
+
+
+ )}
+
+ {pendingId !== selectedElement.id && (
+
+ )}
+
+ ) : (
+ Click on text or image to edit
+ )}
+
+
+