upload fix

Author: f1shy-dev

src/app/actions.ts

@@ -160,6 +160,10 @@ export async function createJob(formData: FormData) {
     throw new Error("Failed to create job");
   }
 
+  await updateBySlackId("user", session.user.id, {
+    has_ever_submitted: true,
+  });
+
   revalidatePath("/dashboard/jobs");
   return { success: true, jobId: result.id };
 }

src/app/api/jobs/[jobId]/upload/route.ts

@@ -17,28 +17,44 @@ export async function POST(
     if (!job) {
       return new NextResponse("Job not found", { status: 404 });
     }
-    if (job["(auto)(creator)slack_id"]?.[0] !== session.user.id) {
-      return new NextResponse("Unauthorized", { status: 403 });
-    }
 
     // Get the file and metadata from the request
     const formData = await request.formData();
     const file = formData.get("file") as File;
     const isMain = formData.get("isMain") === "true";
-    const fileType = formData.get("fileType") as "stl" | "image";
+    const fileType = formData.get("fileType") as
+      | "stl"
+      | "image"
+      | "fulfillment_photo";
+
+    if (
+      ["stl", "image"].includes(fileType)
+        ? job["(auto)(creator)slack_id"]?.[0] !== session.user.id
+        : job["(auto)(assigned_printer)slack_id"]?.[0] !== session.user.id
+    ) {
+      return new NextResponse("Unauthorized", { status: 403 });
+    }
 
     if (!file) {
       return new NextResponse("No file provided", { status: 400 });
     }
-    if (!fileType || !["stl", "image"].includes(fileType)) {
+    if (
+      !fileType ||
+      !["stl", "image", "fulfillment_photo"].includes(fileType)
+    ) {
       return new NextResponse("Invalid file type", { status: 400 });
     }
 
     // Convert file to buffer for Airtable upload
     const buffer = await file.arrayBuffer();
 
     // Upload to Airtable
-    const uploadEndpoint = fileType === "stl" ? "stls" : "user_images";
+    // const uploadEndpoint = fileType === "stl" ? "stls" : "user_images";
+    const uploadEndpoint = {
+      stl: "stls",
+      image: "user_images",
+      fulfillment_photo: "fulfilment_photo",
+    }[fileType];
     const response = await fetch(
       `https://content.airtable.com/v0/${process.env.AIRTABLE_BASE_ID}/${job.id}/${uploadEndpoint}/uploadAttachment`,
       {

src/app/dashboard/jobs/[jobId]/client-components.tsx

@@ -164,7 +164,7 @@ export const PrinterDetails = ({
                     </div>
                   )}
                   {user.region_coordinates && (
-                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <div className="flex items-center gap-2 text-sm">
                       <MapPin className="h-4 w-4" />
                       <span>Region available</span>
                     </div>

src/app/dashboard/jobs/[jobId]/states/actions.ts

@@ -65,10 +65,7 @@ export async function completePrinting(
   throw new Error("Failed to complete printing");
 }
 
-export async function markFulfilled(
-  jobId: string,
-  fulfillmentPhoto: FulfillmentPhoto
-) {
+export async function markFulfilled(jobId: string, description?: string) {
   const session = await auth();
   if (!session?.user?.id) {
     throw new Error("Not authenticated");
@@ -83,14 +80,9 @@ export async function markFulfilled(
     throw new Error("Not authorized to mark this job as fulfilled");
   }
 
-  // TODO: Upload fulfillment photo using existing upload logic
-  // const uploadFormData = new FormData();
-  // uploadFormData.append("file", fulfillmentPhoto.file);
-  // uploadFormData.append("fileType", "fulfillment_photo");
-  // uploadFormData.append("description", fulfillmentPhoto.description || "");
-
   const success = await updateBySlackId("job", jobId, {
     status: "fulfilled_awaiting_confirmation" as JobStatusType,
+    handoff_comments: description,
   });
 
   if (success) {

src/app/dashboard/jobs/[jobId]/states/fulfillment-buttons.tsx

@@ -54,10 +54,21 @@ export function MarkFulfilledButton({
 
     try {
       setIsLoading(true);
-      await markFulfilled(jobId, {
-        file: selectedFile,
-        description,
+      await markFulfilled(jobId, description);
+
+      const uploadFormData = new FormData();
+      uploadFormData.append("file", selectedFile);
+      uploadFormData.append("fileType", "fulfillment_photo");
+
+      const response = await fetch(`/api/jobs/${jobId}/upload`, {
+        method: "POST",
+        body: uploadFormData,
       });
+
+      if (!response.ok) {
+        throw new Error(`Failed to upload fulfillment photo`);
+      }
+
       toast.success("Job marked as fulfilled", {
         description: "Waiting for the submitter to confirm receipt.",
       });

src/components/ui/button.tsx

@@ -1,57 +1,59 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-zinc-300 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "border border-transparent bg-zinc-900 text-zinc-50 shadow hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-red-500 text-zinc-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
+        "destructive-outline":
+          "border border-red-200 bg-white shadow-sm hover:bg-red-100 hover:text-red-900 dark:border-red-800 dark:bg-red-950 dark:hover:bg-red-800 dark:hover:text-red-50",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-zinc-200 bg-white shadow-sm hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          "bg-zinc-100 text-zinc-900 shadow-sm hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80",
+        ghost:
+          "hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
+        link: "text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50",
       },
       size: {
-        default: "h-9 px-4 py-2",
+        default: "h-9 rounded-xl px-4 py-2",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        icon: "h-9 w-9 rounded-md",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
     },
   }
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/ui/input.tsx

@@ -1,22 +1,24 @@
-import * as React from "react"
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
-import { cn } from "@/lib/utils"
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-9 w-full rounded-md border border-input bg-card px-3 py-1 text-card-foreground hover:border-primary/40 focus-visible:border-transparent shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Input.displayName = "Input"
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };

src/lib/types.ts

@@ -68,6 +68,8 @@ export const JobSchema = z.object({
 
   fulfilment_photo: z.array(AirtableAttachmentSchema).optional(),
   gcode_files: z.array(AirtableAttachmentSchema).optional(),
+
+  handoff_comments: z.string().optional(),
 });
 
 // Printer table schema