Draft Functionality

src/app/recipe/page.tsx

@@ -5,10 +5,12 @@ import Navbar from "@/components/Navbar";
 import SearchBar from "@/components/Searchbar";
 import AddItemButton from "@/components/AddItem";
 import ComboCard from "@/components/ComboCard";
+import RecipeCard from "@/components/RecipeCard";
 import { useEffect, useState } from "react";
 
 export default function Recipe() {
   const [searchQuery, setSearchQuery] = useState("");
+  const [selectedName, setSelectedName] = useState<string | null>(null);
 
   return (
     <main>
@@ -21,6 +23,32 @@ export default function Recipe() {
           <AddItemButton />
         </div>
 
+        <div className="flex flex-col gap-4">
+          <div className="flex gap-4">
+            <RecipeCard name="Brown Rice" calories={200} isDraft={true} />
+            <RecipeCard name="Brown Rice" calories={200} isDraft={false} />
+          </div>
+
+          <div className="flex gap-4">
+            <ComboCard
+              name="Brown Rice + Chicken"
+              tags={["High Protein"]}
+              serving={2}
+              isDraft={true}
+              isSelected={selectedName === "Brown Rice [Draft]"}
+              onSelect={() => setSelectedName(selectedName === "Brown Rice [Draft]" ? null : "Brown Rice [Draft]")}
+            />
+            <ComboCard
+              name="Not a Draft Recipe"
+              tags={["High Protein"]}
+              serving={2}
+              isDraft={false}
+              isSelected={selectedName === "Not a Draft Recipe"}
+              onSelect={() => setSelectedName(selectedName === "Not a Draft Recipe" ? null : "Not a Draft Recipe")}
+            />
+          </div>
+        </div>
+
         <FilterMenu />
       </div>
     </main>

src/components/ComboCard.tsx

@@ -4,26 +4,49 @@ import { Utensils } from "lucide-react";
 
 type ComboCardProps = {
   name: string;
-  imageUrl: string;
+  imageUrl?: string;
   tags: string[];
   serving: number;
+  isDraft: boolean;
+  isSelected?: boolean;
+  onSelect?: () => void;
 };
 
-export default function ComboCard({ name, imageUrl, tags = [], serving }: ComboCardProps) {
+export default function ComboCard({
+  name,
+  imageUrl,
+  tags = [],
+  serving,
+  isDraft = true,
+  isSelected,
+  onSelect,
+}: ComboCardProps) {
   const servingText = serving != null ? `${serving}` : null;
 
   return (
-    <div className="relative w-72 h-[346px] overflow-hidden rounded-[14px] border-2 border-gray-300 bg-white">
-      <div className="relative h-28 w-full">
+    <div
+      className={`relative w-72 h-[346px] overflow-hidden rounded-[14px] ${isSelected ? "border-3 border-radish-900" : isDraft ? "border-3 border-dashed border-gray-300" : "border-2 border-gray-300"} bg-white`}
+    >
+      <div className="relative h-28 w-full bg-medium-gray">
         {imageUrl ? <Image src={imageUrl} className="h-full w-full object-cover" fill sizes="288px" alt="" /> : null}
-        <span className="absolute left-2 top-24 inline-flex rounded-full px-2 py-1.5 text-xs bg-combo-500 text-combo-900 font-montserrat font-semibold border-[3px] border-white">
-          Combo
+        {isDraft && (
+          <input
+            type="checkbox"
+            checked={isSelected}
+            onChange={onSelect}
+            className="absolute top-4 right-4 z-20 h-5 w-5 bg-white rounded-[2px] border-2 accent-radish-900 cursor-pointer"
+          />
+        )}
+        <span
+          className={`absolute left-2 top-24 inline-flex rounded-full px-4 py-1.5 text-base font-medium font-montserrat border-[3px] border-white ${isDraft ? "bg-light-gray text-combo-jicama italic" : "bg-combo-500 text-combo-900"}`}
+        >
+          {isDraft ? "Draft" : "Combo"}
         </span>
       </div>
 
       <div className="flex h-[calc(100%-7rem)] flex-col min-h-0 p-4">
         <div className="space-y-3">
-          <p className="mt-1 font-montserrat font-bold text-base text-combo-jicama">{name}</p>
+          <p className="mt-3 font-montserrat font-bold text-base text-combo-jicama">{name}</p>
 
           <div className="flex flex-col gap-1.5">
             {tags.map((tag) => (

src/components/RecipeCard.tsx

@@ -6,6 +6,7 @@ export type RecipeCardProps = {
   calories?: number;
   servingSize?: string;
   tags?: string[];
+  isDraft?: boolean;
 };
 const TAG_STYLES: Record<string, string> = {
   Combo: "bg-combo-500 text-combo-900",
@@ -16,7 +17,14 @@ const TAG_STYLES: Record<string, string> = {
   fallback: "bg-gray-100 text-gray-700",
 };
 
-export default function RecipeCard({ imageUrl, name, calories, servingSize, tags = [] }: RecipeCardProps) {
+export default function RecipeCard({
+  imageUrl,
+  name,
+  calories,
+  servingSize,
+  tags = [],
+  isDraft = false,
+}: RecipeCardProps) {
   const caloriesText = calories != null ? `${calories} cal` : null;
 
   const servingText = servingSize != null ? `${servingSize}` : null;
@@ -27,7 +35,9 @@ export default function RecipeCard({ imageUrl, name, calories, servingSize, tags
   const tagStyle = (primaryTag && TAG_STYLES[primaryTag]) ?? TAG_STYLES.fallback;
 
   return (
-    <div className="flex items-center gap-4 rounded-xl border-2 border-gray-300 bg-white py-6 px-5 transition hover:shadow-md">
+    <div
+      className={`flex items-center gap-4 rounded-xl border-2 border-gray-300 bg-white py-6 px-5 transition hover:shadow-md ${isDraft ? "border-dashed" : ""}`}
+    >
       <div className="relative shrink-0 h-20 w-20 overflow-hidden rounded-md bg-gray-100">
         {imageUrl ? <Image src={imageUrl} alt={name} fill sizes="80px" className="object-cover" /> : null}
       </div>

src/database/ComboSchema.ts

@@ -13,6 +13,8 @@ const ComboSchema = new Schema(
     allergens: { type: String, required: false },
     instructions: { type: String, required: false },
     nutritional_info: { type: [Number], required: false },
+    imageUrl: { type: String, required: false },
+    isDraft: { type: Boolean, required: true, default: true },
   },
   {
     timestamps: true,

src/database/RecipeSchema.ts

@@ -5,13 +5,29 @@ const RecipeSchema = new Schema(
   {
     _id: { type: String, required: true },
     name: { type: String, required: true, unique: false },
-    serving: { type: Number, required: true },
+
+    serving: {
+      type: Number,
+      required: function () {
+        return !this.isDraft;
+      },
+    },
+
     tags: { type: [String], required: false },
-    ingredients: { type: [Ingredient.schema], required: true },
+
+    ingredients: {
+      type: [Ingredient.schema],
+      required: function () {
+        return !this.isDraft;
+      },
+    },
+
     instructions: { type: String, required: false },
     comments: { type: String, required: false },
+    imageUrl: { type: String, required: false },
     lastVerified: { type: Date, required: false },
     verifiedBy: { type: String, required: false },
+    isDraft: { type: Boolean, required: true, default: true },
   },
   {
     timestamps: true,