shipd 0.1.0

package/template/app/dashboard/upload/page.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Progress } from "@/components/ui/progress";
+import { Check, FileImage, Upload, X } from "lucide-react";
+import Image from "next/image";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+
+interface UploadedFile {
+  id: string;
+  name: string;
+  url: string;
+  size: number;
+  type: string;
+  uploadedAt: Date;
+}
+
+export default function UploadPage() {
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+  const [dragActive, setDragActive] = useState(false);
+
+  const handleFileUpload = async (files: FileList | File[]) => {
+    const fileArray = Array.from(files);
+
+    for (const file of fileArray) {
+      if (!file.type.startsWith("image/")) {
+        toast.error(`${file.name} is not an image file`);
+        continue;
+      }
+
+      if (file.size > 5 * 1024 * 1024) {
+        toast.error(`${file.name} is too large (max 5MB)`);
+        continue;
+      }
+
+      setUploading(true);
+      setUploadProgress(0);
+
+      try {
+        const formData = new FormData();
+        formData.append("file", file);
+
+        // Simulate progress
+        const progressInterval = setInterval(() => {
+          setUploadProgress((prev) => {
+            if (prev >= 90) {
+              clearInterval(progressInterval);
+              return prev;
+            }
+            return prev + Math.random() * 20;
+          });
+        }, 200);
+
+        const response = await fetch("/api/upload-image", {
+          method: "POST",
+          body: formData,
+        });
+
+        clearInterval(progressInterval);
+        setUploadProgress(100);
+
+        if (!response.ok) {
+          throw new Error("Upload failed");
+        }
+
+        const { url } = await response.json();
+
+        const uploadedFile: UploadedFile = {
+          id: crypto.randomUUID(),
+          name: file.name,
+          url,
+          size: file.size,
+          type: file.type,
+          uploadedAt: new Date(),
+        };
+
+        setUploadedFiles((prev) => [uploadedFile, ...prev]);
+        toast.success(`${file.name} uploaded successfully`);
+      } catch (error) {
+        console.error("Upload error:", error);
+        toast.error(`Failed to upload ${file.name}`);
+      } finally {
+        setUploading(false);
+        setUploadProgress(0);
+      }
+    }
+  };
+
+  const handleDrag = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      handleFileUpload(e.dataTransfer.files);
+    }
+  }, []);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      handleFileUpload(e.target.files);
+    }
+  };
+
+  const removeFile = (id: string) => {
+    setUploadedFiles((prev) => prev.filter((file) => file.id !== id));
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h1 className="text-3xl font-semibold tracking-tight">File Upload</h1>
+        <p className="text-muted-foreground mt-2">
+          Upload images to Cloudflare R2 storage with drag and drop support
+        </p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Upload Area */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Upload className="h-5 w-5" />
+              Upload Images
+            </CardTitle>
+            <CardDescription>
+              Upload images to Cloudflare R2. Maximum file size is 5MB.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div
+              className={`relative border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
+                dragActive
+                  ? "border-primary bg-primary/5"
+                  : "border-muted-foreground/25 hover:border-muted-foreground/50"
+              }`}
+              onDragEnter={handleDrag}
+              onDragLeave={handleDrag}
+              onDragOver={handleDrag}
+              onDrop={handleDrop}
+            >
+              <Input
+                type="file"
+                accept="image/*"
+                multiple
+                onChange={handleInputChange}
+                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                disabled={uploading}
+              />
+              <div className="space-y-2">
+                <FileImage className="h-10 w-10 mx-auto text-muted-foreground" />
+                <div>
+                  <p className="text-sm font-medium">
+                    {dragActive
+                      ? "Drop files here"
+                      : "Click to upload or drag and drop"}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    PNG, JPG, GIF up to 5MB
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {uploading && (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-sm">
+                  <span>Uploading...</span>
+                  <span>{Math.round(uploadProgress)}%</span>
+                </div>
+                <Progress value={uploadProgress} className="h-2" />
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Upload Info */}
+        <Card>
+          <CardHeader>
+            <CardTitle>About R2 Storage</CardTitle>
+            <CardDescription>
+              Cloudflare R2 provides S3-compatible object storage
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-3">
+              <div className="flex items-start gap-3">
+                <Check className="h-4 w-4 text-green-500 mt-0.5" />
+                <div className="text-sm">
+                  <p className="font-medium">Global CDN</p>
+                  <p className="text-muted-foreground">
+                    Fast delivery worldwide
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <Check className="h-4 w-4 text-green-500 mt-0.5" />
+                <div className="text-sm">
+                  <p className="font-medium">Zero Egress Fees</p>
+                  <p className="text-muted-foreground">No bandwidth charges</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <Check className="h-4 w-4 text-green-500 mt-0.5" />
+                <div className="text-sm">
+                  <p className="font-medium">S3 Compatible</p>
+                  <p className="text-muted-foreground">
+                    Works with existing tools
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <Check className="h-4 w-4 text-green-500 mt-0.5" />
+                <div className="text-sm">
+                  <p className="font-medium">Auto Scaling</p>
+                  <p className="text-muted-foreground">Handles any file size</p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Uploaded Files */}
+      {uploadedFiles.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Uploaded Files ({uploadedFiles.length})</CardTitle>
+            <CardDescription>
+              Recently uploaded images to R2 storage
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {uploadedFiles.map((file) => (
+                <div
+                  key={file.id}
+                  className="group relative border rounded-lg overflow-hidden hover:shadow-md transition-shadow"
+                >
+                  <div className="aspect-video relative bg-muted">
+                    <Image
+                      src={file.url}
+                      alt={file.name}
+                      fill
+                      className="object-cover"
+                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                    />
+                  </div>
+                  <div className="p-3">
+                    <p
+                      className="font-medium text-sm truncate"
+                      title={file.name}
+                    >
+                      {file.name}
+                    </p>
+                    <div className="flex items-center justify-between text-xs text-muted-foreground mt-1">
+                      <span>{formatFileSize(file.size)}</span>
+                      <span>{file.uploadedAt.toLocaleDateString()}</span>
+                    </div>
+                    <div className="mt-2 flex items-center gap-2">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => navigator.clipboard.writeText(file.url)}
+                        className="flex-1 text-xs"
+                      >
+                        Copy URL
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => window.open(file.url, "_blank")}
+                        className="flex-1 text-xs"
+                      >
+                        Open
+                      </Button>
+                    </div>
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => removeFile(file.id)}
+                    className="absolute top-2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80 hover:bg-background"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/template/app/error.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { AlertCircle, Home, RefreshCcw } from "lucide-react";
+import Link from "next/link";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error("Application error:", error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center px-6">
+      <div className="text-center space-y-6 max-w-md">
+        <div className="flex justify-center">
+          <div className="rounded-full bg-destructive/10 p-4">
+            <AlertCircle className="h-12 w-12 text-destructive" />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <h1 className="text-4xl font-bold">Something Went Wrong</h1>
+          <p className="text-muted-foreground text-lg">
+            We&apos;re sorry, but something unexpected happened. Our team has been notified.
+          </p>
+        </div>
+
+        {process.env.NODE_ENV === "development" && (
+          <div className="bg-muted/50 rounded-lg p-4 text-left">
+            <p className="text-sm font-mono text-destructive break-all">
+              {error.message}
+            </p>
+            {error.digest && (
+              <p className="text-xs text-muted-foreground mt-2">
+                Error ID: {error.digest}
+              </p>
+            )}
+          </div>
+        )}
+
+        <div className="flex flex-col sm:flex-row gap-3 justify-center items-center pt-4">
+          <Button onClick={reset} variant="default">
+            <RefreshCcw className="mr-2 h-4 w-4" />
+            Try Again
+          </Button>
+          <Button asChild variant="outline">
+            <Link href="/">
+              <Home className="mr-2 h-4 w-4" />
+              Go Home
+            </Link>
+          </Button>
+        </div>
+
+        <div className="pt-8 text-sm text-muted-foreground">
+          <p>
+            If this problem persists,{" "}
+            <Link
+              href="https://github.com/kedbrant/Saas-scaffold/issues"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              please report it
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/app/globals.css

@@ -0,0 +1,126 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --font-sans: var(--font-apple-system);
+    --font-mono: var(--font-sf-mono);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --radius-sm: 8px;
+    --radius-md: 10px;
+    --radius-lg: 12px;
+    --radius-xl: 20px;
+}
+
+:root {
+    /* Dark Theme with Sunset Orange */
+    --background: #000000; /* Pure black */
+    --foreground: #ffffff;
+    --card: #0a0a0a; /* Slightly lighter than black */
+    --card-foreground: #ffffff;
+    --popover: #0a0a0a;
+    --popover-foreground: #ffffff;
+    --primary: #ff5722; /* Deep sunset orange */
+    --primary-foreground: #ffffff;
+    --secondary: #1a1a1a; /* Dark gray */
+    --secondary-foreground: #ffffff;
+    --muted: #1a1a1a;
+    --muted-foreground: #a1a1a1;
+    --accent: #ff5722; /* Sunset orange */
+    --accent-foreground: #ffffff;
+    --destructive: #ff3b30;
+    --destructive-foreground: #ffffff;
+    --border: #2a2a2a; /* Subtle dark border */
+    --input: #1a1a1a;
+    --ring: #ff5722;
+    --chart-1: #ff5722; /* Sunset orange */
+    --chart-2: #ff7043; /* Lighter orange */
+    --chart-3: #ff8a65; /* Even lighter orange */
+    --chart-4: #ffab91; /* Peachy orange */
+    --chart-5: #d84315; /* Deep burnt orange */
+    --sidebar: #0a0a0a;
+    --sidebar-foreground: #ffffff;
+    --sidebar-primary: #ff5722;
+    --sidebar-primary-foreground: #ffffff;
+    --sidebar-accent: #1a1a1a;
+    --sidebar-accent-foreground: #ffffff;
+    --sidebar-border: #2a2a2a;
+    --sidebar-ring: #ff5722;
+    /* Fonts */
+    --font-apple-system:
+        -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue",
+        Helvetica, sans-serif;
+    --font-sf-mono: "SF Mono", Menlo, monospace;
+    --font-sans: var(--font-apple-system);
+    --font-serif: "New York", Georgia, serif;
+    --font-mono: var(--font-sf-mono);
+    --radius: 10px;
+    /* Dark theme shadows with orange glow */
+    --shadow-2xs: 0px 1px 2px rgba(255, 87, 34, 0.05);
+    --shadow-xs: 0px 1px 3px rgba(255, 87, 34, 0.1);
+    --shadow-sm: 0px 2px 4px rgba(255, 87, 34, 0.1);
+    --shadow: 0px 2px 6px rgba(255, 87, 34, 0.1);
+    --shadow-md: 0px 4px 8px rgba(255, 87, 34, 0.15);
+    --shadow-lg: 0px 8px 16px rgba(255, 87, 34, 0.2);
+    --shadow-xl: 0px 12px 24px rgba(255, 87, 34, 0.25);
+    --shadow-2xl: 0px 16px 32px rgba(255, 87, 34, 0.3);
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+    body {
+        @apply bg-background text-foreground font-sans;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+    button,
+    input,
+    select,
+    textarea {
+        @apply focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all duration-200;
+    }
+    button {
+        @apply hover:cursor-pointer;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply font-medium tracking-tight;
+    }
+}

package/template/app/layout.tsx

@@ -0,0 +1,135 @@
+import { Toaster } from "@/components/ui/sonner";
+import type { Metadata } from "next";
+import { ThemeProvider } from "../components/provider";
+import "./globals.css";
+import { Analytics } from "@vercel/analytics/next";
+
+const siteConfig = {
+  name: "{{PROJECT_NAME}}",
+  description: "{{PROJECT_DESCRIPTION}}",
+  url: "{{APP_URL}}",
+  ogImage: "{{APP_URL}}/og-image.png",
+  links: {
+    twitter: "https://twitter.com/yourhandle",
+    github: "https://github.com/yourusername/{{PROJECT_NAME_KEBAB}}",
+  },
+};
+
+export const metadata: Metadata = {
+  metadataBase: new URL(siteConfig.url),
+  title: {
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  keywords: [
+    "SaaS",
+    "Next.js",
+    "React",
+    "TypeScript",
+    "Tailwind CSS",
+    "shadcn/ui",
+    "Authentication",
+    "Payments",
+  ],
+  authors: [
+    {
+      name: siteConfig.name,
+      url: siteConfig.url,
+    },
+  ],
+  creator: siteConfig.name,
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: siteConfig.url,
+    title: siteConfig.name,
+    description: siteConfig.description,
+    siteName: siteConfig.name,
+    images: [
+      {
+        url: siteConfig.ogImage,
+        width: 1200,
+        height: 630,
+        alt: siteConfig.name,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: siteConfig.name,
+    description: siteConfig.description,
+    images: [siteConfig.ogImage],
+    creator: "@yourhandle",
+  },
+  icons: {
+    icon: "/favicon.svg",
+    shortcut: "/favicon.svg",
+    apple: "/favicon.svg",
+  },
+  manifest: "/site.webmanifest",
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
+  verification: {
+    google: "your-google-verification-code",
+    // yandex: "your-yandex-verification-code",
+    // yahoo: "your-yahoo-verification-code",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    name: siteConfig.name,
+    description: siteConfig.description,
+    url: siteConfig.url,
+    applicationCategory: "BusinessApplication",
+    offers: {
+      "@type": "Offer",
+      category: "SaaS",
+    },
+    creator: {
+      "@type": "Organization",
+      name: siteConfig.name,
+      url: siteConfig.url,
+    },
+  };
+
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+      </head>
+      <body className={`font-[-apple-system,BlinkMacSystemFont]antialiased`}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="light"
+          enableSystem
+          forcedTheme="light"
+          disableTransitionOnChange
+        >
+          {children}
+          <Toaster />
+          <Analytics />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}