npm install axios @tanstack/react-query sonner
npm install @hookform/resolvers/zod react-hook-form zod
npm install lucide-react date-fns clsx

src/
├── config/
│   └── axios.ts
├── services/
│   └── products.ts
├── hooks/
│   └── useProducts.ts
├── components/
│   ├── ui/
│   │   └── data-table/
│   │       ├── index.ts
│   │       ├── data-table.tsx
│   │       ├── table-actions.tsx
│   │       ├── filter-bar.tsx
│   │       ├── entity-form.tsx
│   │       ├── confirmation-dialog.tsx
│   │       ├── table-loading.tsx
│   │       ├── date-filter.tsx
│   │       └── rows-per-page.tsx
│   └── products/
│       └── product-listing.tsx
└── app/
    └── products/
        ├── page.tsx
        └── [id]/
            └── edit/
                ├── page.tsx
                ├── layout.tsx
                ├── edit-loading.tsx
                ├── product-update-form.tsx
                └── tabs/
                    ├── basic-info-tab.tsx
                    ├── inventory-pricing-tab.tsx
                    └── additional-details-tab.tsx

import axios from "axios";

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

// Create a base axios instance without authentication
const baseApi = axios.create({
  baseURL: `${BASE_URL}/api/v1`,
  headers: {
    "Content-Type": "application/json",
  },
});

export { baseApi as api };

import { api } from "@/config/axios";
import {
  ProductCreateDTO,
  ProductResponse,
  BriefProductsResponse,
  ProductData,
} from "@/types/product";

// Create product with minimal payload (SOAPI: Small Payloads)
export async function createProduct(data: ProductCreateDTO) {
  try {
    const res = await api.post("/products", data);
    return {
      success: true,
      data: res.data.data, // Return created product ID
      error: null,
    };
  } catch (error) {
    console.log(error);
    return {
      success: false,
      error: "Failed to Create Product",
      data: null,
    };
  }
}

// Get optimized product list (SOAPI: Optimized Queries)
export async function getBriefProducts(
  params = {}
): Promise<BriefProductsResponse> {
  try {
    const res = await api.get("/products/brief", { params });
    return res.data;
  } catch (error) {
    console.log(error);
    if (axios.isAxiosError(error)) {
      throw new Error(
        error.response?.data?.error || "Failed to fetch products"
      );
    }
    throw new Error("An unexpected error occurred");
  }
}

// Get full product details
export async function getProductById(id: string): Promise<ProductResponse> {
  try {
    const res = await api.get(`/products/${id}`);
    return res.data;
  } catch (error) {
    console.log(error);
    if (axios.isAxiosError(error)) {
      throw new Error(error.response?.data?.error || "Failed to fetch product");
    }
    throw new Error("An unexpected error occurred");
  }
}

// Update product with only changed fields (SOAPI: Atomic Updates)
export async function updateProductById(
  id: string,
  data: Partial<ProductData>
) {
  try {
    const res = await api.patch(`/products/${id}`, data);
    return {
      success: true,
      data: res.data.id, // Return only ID (SOAPI: Intelligent Responses)
    };
  } catch (error) {
    console.log(error);
    return { success: false };
  }
}

// Protected delete with relationship checking (SOAPI: Protected Deletes)
export async function deleteProduct(id: string) {
  try {
    const res = await api.delete(`/products/${id}`);
    return {
      success: true,
      data: res.data.id,
      error: null,
    };
  } catch (error) {
    console.log(error);
    return {
      success: false,
      data: null,
      error: "Failed to delete the Product",
    };
  }
}

export interface ProductCreateDTO {
  name: string;
  sellingPrice: number;
  costPrice: number;
  sku: string;
  thumbnail?: string;
}

export interface BriefProductDTO {
  id: string;
  name: string;
  sellingPrice: number;
  salesCount: number;
  salesTotal: number;
  thumbnail: string | null;
  createdAt: Date;
}

export interface ProductData extends BriefProductDTO {
  slug: string;
  sku: string;
  barcode?: string;
  description?: string;
  dimensions?: string;
  weight?: number;
  costPrice: number;
  minStockLevel: number;
  maxStockLevel?: number;
  isActive: boolean;
  isSerialTracked: boolean;
  categoryId?: string;
  brandId?: string;
  unitId?: string;
  taxRateId?: string;
  tax?: number;
  unitOfMeasure?: string;
  imageUrls?: string[];
  // Additional fields for extended details
  upc?: string;
  ean?: string;
  mpn?: string;
  isbn?: string;
  updatedAt: Date;
}

export interface BriefProductsResponse {
  data: BriefProductDTO[];
  total: number;
}

export interface ProductResponse {
  data: ProductData;
  success: boolean;
}

import {
  createProduct,
  getBriefProducts,
  getProductById,
  updateProductById,
  deleteProduct,
} from "@/services/products";
import { ProductCreateDTO } from "@/types/product";
import {
  useQuery,
  useSuspenseQuery,
  useMutation,
  useQueryClient,
} from "@tanstack/react-query";
import { toast } from "sonner";

// Query keys for caching
export const productKeys = {
  all: ["products"] as const,
  lists: () => [...productKeys.all, "list"] as const,
  list: (filters: any) => [...productKeys.lists(), { filters }] as const,
  details: () => [...productKeys.all, "detail"] as const,
  detail: (id: string) => [...productKeys.details(), id] as const,
};

export function useProducts() {
  const { data: products, refetch } = useSuspenseQuery({
    queryKey: productKeys.lists(),
    queryFn: () => getBriefProducts(),
  });

  return {
    products: products.data,
    refetch,
  };
}

export function useCreateProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (data: ProductCreateDTO) => createProduct(data),
    onSuccess: () => {
      toast.success("Product added successfully");
      queryClient.invalidateQueries({ queryKey: productKeys.lists() });
    },
    onError: (error: Error) => {
      toast.error("Failed to add Product", {
        description: error.message || "Unknown error occurred",
      });
    },
  });
}

export function useDeleteProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (id: string) => deleteProduct(id),
    onSuccess: () => {
      toast.success("Product deleted successfully");
      queryClient.invalidateQueries({ queryKey: productKeys.lists() });
    },
    onError: (error: Error) => {
      toast.error("Failed to delete product", {
        description: error.message || "Unknown error occurred",
      });
    },
  });
}

import { Suspense } from "react";
import { TableLoading } from "@/components/ui/data-table";
import ProductListing from "@/components/products/product-listing";

// Create an async component for data fetching
async function ProductListingWithData() {
  return (
    <ProductListing title="Products" subtitle="Manage your product catalog" />
  );
}

export default function ProductsPage() {
  return (
    <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
      <Suspense fallback={<TableLoading />}>
        <ProductListingWithData />
      </Suspense>
    </div>
  );
}

"use client";

import { useState, useEffect } from "react";
import { format } from "date-fns";
import * as XLSX from "xlsx";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { toast } from "sonner";
import { DollarSign } from "lucide-react";
import {
  DataTable,
  Column,
  TableActions,
  EntityForm,
  ConfirmationDialog,
} from "@/components/ui/data-table";
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  FormDescription,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  useCreateProduct,
  useDeleteProduct,
  useProducts,
} from "@/hooks/useProducts";
import { BriefProductDTO, ProductCreateDTO } from "@/types/product";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";

interface ProductListingProps {
  title: string;
  subtitle: string;
}

// SOAPI: Small Payloads - Only 5 fields maximum for creation
const productFormSchema = z.object({
  name: z.string().min(1, "Name is required"),
  sellingPrice: z.string().min(1, "Price is required"),
  costPrice: z.string().min(1, "Cost price is required"),
  sku: z.string().min(1, "SKU is required"),
  thumbnail: z.string().optional(),
});

type ProductFormValues = z.infer<typeof productFormSchema>;

export default function ProductListing({
  title,
  subtitle,
}: ProductListingProps) {
  // SOAPI: React Query with Suspense
  const { products, refetch } = useProducts();
  const createProductMutation = useCreateProduct();
  const deleteProductMutation = useDeleteProduct();

  // Local state
  const [formDialogOpen, setFormDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [productToDelete, setProductToDelete] =
    useState<BriefProductDTO | null>(null);

  // SOAPI: Small payload form
  const form = useForm<ProductCreateDTO>({
    resolver: zodResolver(productFormSchema),
    defaultValues: {
      name: "",
      sellingPrice: 0,
      costPrice: 0,
      sku: "",
      thumbnail:
        "https://14j7oh8kso.ufs.sh/f/HLxTbDBCDLwfAXaapcezIN7vwylkF1PXSCqAuseUG0gx8mhd",
    },
  });

  const router = useRouter();

  // Format currency
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("en-UG", {
      style: "currency",
      currency: "UGX",
      minimumFractionDigits: 0,
    }).format(amount);
  };

  // Export to Excel
  const handleExport = async (filteredProducts: BriefProductDTO[]) => {
    try {
      const exportData = filteredProducts.map((product) => ({
        Name: product.name,
        Price: product.sellingPrice,
        "Sales Count": product.salesCount,
        "Total Sales": formatCurrency(product.salesTotal),
        "Date Added": format(new Date(product.createdAt), "MMM dd, yyyy"),
      }));

      const worksheet = XLSX.utils.json_to_sheet(exportData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Products");

      const fileName = `Products_${format(new Date(), "yyyy-MM-dd")}.xlsx`;
      XLSX.writeFile(workbook, fileName);

      toast.success("Export successful", {
        description: `Products exported to ${fileName}`,
      });
    } catch (error) {
      toast.error("Export failed");
    }
  };

  // Handle add new click
  const handleAddClick = () => {
    setFormDialogOpen(true);
  };

  // Handle edit click - Navigate to edit page
  const handleEditClick = (product: BriefProductDTO) => {
    router.push(`/products/${product.id}/edit`);
  };

  // Handle delete click
  const handleDeleteClick = (product: BriefProductDTO) => {
    setProductToDelete(product);
    setDeleteDialogOpen(true);
  };

  // SOAPI: Small payload submission
  const onSubmit = async (data: ProductCreateDTO) => {
    // Convert string prices to numbers
    data.costPrice = Number(data.costPrice);
    data.sellingPrice = Number(data.sellingPrice);

    createProductMutation.mutate(data, {
      onSuccess: () => {
        setFormDialogOpen(false);
        form.reset();
      },
    });
  };

  // Handle confirming delete
  const handleConfirmDelete = () => {
    if (productToDelete) {
      deleteProductMutation.mutate(productToDelete.id, {
        onSuccess: () => {
          setDeleteDialogOpen(false);
          setProductToDelete(null);
        },
      });
    }
  };

  // SOAPI: Optimized columns - only display what's needed for list view
  const columns: Column<BriefProductDTO>[] = [
    {
      header: "Image",
      accessorKey: "thumbnail",
      cell: (row) => (
        <img
          className="w-10 h-10 rounded-md object-cover"
          src={row.thumbnail ?? "/placeholder.png"}
          alt={row.name}
        />
      ),
    },
    {
      header: "Name",
      accessorKey: "name",
      cell: (row) => (
        <span className="font-medium line-clamp-1">
          {row.name.length > 20 ? `${row.name.substring(0, 20)}...` : row.name}
        </span>
      ),
    },
    {
      header: "Price",
      accessorKey: (row) => formatCurrency(row.sellingPrice),
    },
    {
      header: "Sales Count",
      accessorKey: "salesCount",
    },
    {
      header: "Total Sales",
      accessorKey: (row) => formatCurrency(row.salesTotal),
    },
  ];

  return (
    <>
      <DataTable<BriefProductDTO>
        title={title}
        subtitle={subtitle}
        data={products}
        columns={columns}
        keyField="id"
        isLoading={false}
        onRefresh={refetch}
        actions={{
          onAdd: handleAddClick,
          onExport: handleExport,
        }}
        filters={{
          searchFields: ["name"],
          enableDateFilter: true,
          getItemDate: (item) => item.createdAt,
        }}
        renderRowActions={(item) => (
          <TableActions.RowActions
            onEdit={() => handleEditClick(item)}
            onDelete={() => handleDeleteClick(item)}
            isDeleting={
              deleteProductMutation.isPending && productToDelete?.id === item.id
            }
          />
        )}
      />

      {/* SOAPI: Small Payload Form - Only 5 fields */}
      <EntityForm
        size="md"
        open={formDialogOpen}
        onOpenChange={setFormDialogOpen}
        title="Add New Product"
        form={form}
        onSubmit={onSubmit}
        isSubmitting={createProductMutation.isPending}
        submitLabel="Add Product"
      >
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Product Name</FormLabel>
              <FormControl>
                <Input placeholder="Enter product name" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <div className="grid gap-3 grid-cols-2">
          <FormField
            control={form.control}
            name="sellingPrice"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Selling Price</FormLabel>
                <FormControl>
                  <div className="relative">
                    <DollarSign className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input placeholder="25,000" className="pl-8" {...field} />
                  </div>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="costPrice"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Cost Price</FormLabel>
                <FormControl>
                  <div className="relative">
                    <DollarSign className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input placeholder="20,000" className="pl-8" {...field} />
                  </div>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

        <FormField
          control={form.control}
          name="sku"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Product SKU</FormLabel>
              <FormControl>
                <Input placeholder="SKU-001" {...field} />
              </FormControl>
              <FormDescription>Unique product identifier</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
      </EntityForm>

      {/* Delete Confirmation Dialog */}
      <ConfirmationDialog
        open={deleteDialogOpen}
        onOpenChange={setDeleteDialogOpen}
        title="Delete Product"
        description={
          productToDelete ? (
            <>
              Are you sure you want to delete{" "}
              <strong>{productToDelete.name}</strong>? This action cannot be
              undone.
            </>
          ) : (
            "Are you sure you want to delete this product?"
          )
        }
        onConfirm={handleConfirmDelete}
        isConfirming={deleteProductMutation.isPending}
        confirmLabel="Delete"
        variant="destructive"
      />
    </>
  );
}

import { Suspense } from "react";
import { TableLoading } from "@/components/ui/data-table";
import DashboardCourseListing from "@/components/Lists/DashboardCourseListing";
import { getCourses } from "@/actions/courses";
import { getAuthUser } from "@/config/useAuth";

// Create an async component for data fetching
async function CourseListingWithData() {
  const user = await getAuthUser();
  const courses = (await getCourses()) || [];

  return (
    <DashboardCourseListing
      title={`Courses (${courses.length})`}
      subtitle="Manage Courses"
      courses={courses}
      instructorId={user?.id ?? ""}
    />
  );
}

export default function Courses() {
  return (
    <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
      <Suspense fallback={<TableLoading />}>
        <CourseListingWithData />
      </Suspense>
    </div>
  );
}

"use client";
export type CourseBrief = {
  id: string;
  title: string;
  thumbnail: string | null;
  students: number;
  createdAt: Date;
};

import { useState } from "react";
import * as XLSX from "xlsx";
// import DataTable from '../ReUsableDataTable/DataTable';
import { formatDate, formatDate2, formatISODate } from "@/lib/utils";

import { format } from "date-fns";
import { toast } from "sonner";

import {
  Column,
  ConfirmationDialog,
  DataTable,
  TableActions,
} from "../ui/data-table";
import { useRouter } from "next/navigation";
import CourseCreateForm from "@/app/(dashboard)/dashboard/courses/components/CourseCreateForm";
import { Button } from "../ui/button";

import { deleteCourse } from "@/actions/courses";
import { Pencil } from "lucide-react";

export default function DashboardCourseListing({
  courses,
  title,
  subtitle,
  instructorId,
}: {
  courses: CourseBrief[];
  title: string;
  subtitle: string;
  instructorId: string;
}) {
  const router = useRouter();
  const [isDeleting, setIsDeleting] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deleteItem, setDeleteItem] = useState<CourseBrief | null>(null);
  const [modalOpen, setModalOpen] = useState(false);

  console.log(deleteItem);
  const columns: Column<CourseBrief>[] = [
    {
      accessorKey: "title",
      header: "Course title",
      cell: (row) => {
        const course = row;
        const image = course.thumbnail || "/default.png";
        return (
          <div className="flex items-center gap-3">
            <img
              src={`${image}`}
              alt={course.title}
              className="h-10 w-10 rounded-md object-cover"
            />
            <span className="font-medium">{course.title}</span>
          </div>
        );
      },
    },
    {
      accessorKey: "students",
      header: "Students",
      cell: (row) => {
        const course = row;
        return (
          <div className="">
            <span className="font-medium">{course.students}</span>
          </div>
        );
      },
    },
    {
      accessorKey: "id",
      header: "Add Module",
      cell: (row) => {
        const course = row;
        return (
          <div className="">
            <Button variant={"outline"} href={`/course-module/${course.id}`}>
              <Pencil className="w-4 h-4" />
              Add Course Modules
            </Button>
          </div>
        );
      },
    },
    {
      header: "Date Added",
      accessorKey: (row) => formatISODate(row.createdAt),
    },
  ];

  const handleAddNew = () => {
    setModalOpen(true);
  };

  // Export to Excel
  const handleExport = async (filteredCourses: CourseBrief[]) => {
    try {
      // Prepare data for export
      const exportData = filteredCourses.map((course) => ({
        ID: course.id,
        Title: course.title,
        Thumbnail: course.thumbnail,
        "Date Added": formatISODate(course.createdAt),
      }));

      // Create workbook and worksheet
      const worksheet = XLSX.utils.json_to_sheet(exportData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Products");

      // Generate filename with current date
      const fileName = `Products_${format(new Date(), "yyyy-MM-dd")}.xlsx`;

      // Export to file
      XLSX.writeFile(workbook, fileName);

      toast.success("Export successful", {
        description: `Products exported to ${fileName}`,
      });
    } catch (error) {
      toast.error("Export failed", {
        description:
          error instanceof Error ? error.message : "Unknown error occurred",
      });
    } finally {
      // setIsExporting(false);
    }
  };

  // Handle edit click
  const handleEditClick = (course: CourseBrief) => {
    router.push(`/dashboard/courses/${course.id}/edit`);
    // setEditingCategory(category);
    // setModalOpen(true);
  };

  // Handle delete click
  const handleDeleteClick = (course: CourseBrief) => {
    setDeleteItem(course);
    setDeleteDialogOpen(true);
  };
  const handleConfirmDelete = async () => {
    if (deleteItem) {
      setIsDeleting(true);
      const count = deleteItem.students ?? 0;
      if (count > 0) {
        toast.error("Delete Failed", {
          description: "This Course has associated students",
        });
        setDeleteDialogOpen(false);
        setIsDeleting(false);
        return;
      }
      await deleteCourse(deleteItem.id);
      console.log("Deleting Course with ID:", deleteItem.id);
    }
  };

  return (
    <div className="container mx-auto py-6">
      <CourseCreateForm
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        userId={instructorId}
      />
      <DataTable<CourseBrief>
        title={title}
        subtitle={subtitle}
        data={courses}
        columns={columns}
        keyField="id"
        isLoading={false} // With Suspense, we're guaranteed to have data
        onRefresh={() => console.log("refreshing")}
        actions={{
          onAdd: handleAddNew,
          onExport: handleExport,
        }}
        filters={{
          searchFields: ["title"],
          enableDateFilter: true,
          getItemDate: (item) => item.createdAt,
        }}
        renderRowActions={(item) => (
          <TableActions.RowActions
            onEdit={() => handleEditClick(item)}
            onDelete={() => handleDeleteClick(item)}
            // isDeleting={isDeleting}
          />
        )}
      />

      <ConfirmationDialog
        open={deleteDialogOpen}
        onOpenChange={setDeleteDialogOpen}
        title="Delete Course"
        description={
          deleteItem ? (
            <>
              Are you sure you want to delete{" "}
              <strong>{deleteItem.title}</strong>? This action cannot be undone.
            </>
          ) : (
            "Are you sure you want to delete this Department?"
          )
        }
        onConfirm={handleConfirmDelete}
        isConfirming={isDeleting}
        confirmLabel="Delete"
        variant="destructive"
      />
    </div>
  );
}

"use client";
import React, { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

import { Check, DollarSign, FolderPlus, Pen, Pencil, Plus } from "lucide-react";
import { useForm } from "react-hook-form";

import { Button } from "@/components/ui/button";
import TextInput from "@/components/FormInputs/TextInput";
import SubmitButton from "@/components/FormInputs/SubmitButton";
import { CourseCreateDTO } from "@/types/course";
import { toast } from "sonner";
import TextArea from "@/components/FormInputs/TextAreaInput";
import { generateSlug } from "@/lib/generateSlug";
import { createCourse } from "@/actions/courses";
import { useRouter } from "next/navigation";

export default function CourseCreateForm({
  userId,
  initialContent,
  editingId,
  isOpen,
  onClose,
}: {
  userId: string;
  initialContent?: string;
  editingId?: string;
  isOpen: boolean;
  onClose: () => void;
}) {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<CourseCreateDTO>({
    defaultValues: {
      title: "",
      summary: "",
    },
  });

  const [loading, setLoading] = useState(false);
  const router = useRouter();
  async function saveCourse(data: CourseCreateDTO) {
    data.instructorId = userId;
    data.slug = generateSlug(data.title);
    data.price = Number(data.price);
    try {
      setLoading(true);
      const res = await createCourse(data);
      if (res.error) {
        toast.error("Failed to Create Course", {
          description: res.error,
        });
        return;
      }
      setLoading(false);
      toast.success("Successfully Created!");
      reset();
      setTimeout(() => {
        router.push(`/dashboard/courses/${res.data?.id}/edit`);
      }, 3000);
    } catch (error) {
      toast.error("Something went wrong");
      setLoading(false);
      console.log(error);
    }
  }

  return (
    <div>
      <div className="py-1">
        <Dialog
          open={isOpen}
          onOpenChange={(open) => {
            if (!open) {
              reset();
              onClose();
            }
          }}
        >
          <DialogContent>
            <DialogHeader>
              <DialogTitle>
                {editingId ? "Edit Course" : "Add New Course"}
              </DialogTitle>
            </DialogHeader>
            <form className="" onSubmit={handleSubmit(saveCourse)}>
              <div className="">
                <div className="space-y-3">
                  <div className="grid gap-3">
                    <TextInput
                      register={register}
                      errors={errors}
                      label="Course title"
                      name="title"
                      icon={Check}
                    />
                  </div>
                  <div className="grid gap-3">
                    <TextInput
                      register={register}
                      errors={errors}
                      label="Course Price"
                      name="price"
                      type="number"
                      icon={DollarSign}
                    />
                  </div>
                  <div className="grid gap-3">
                    <TextArea
                      register={register}
                      errors={errors}
                      label="Course Summary Description"
                      name="summary"
                      helperText="The summary should short to 125 characters"
                    />
                  </div>
                </div>
                <div className="py-3 flex items-center justify-between">
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => {
                      reset();
                      onClose();
                    }}
                  >
                    Cancel
                  </Button>
                  <SubmitButton
                    title={editingId ? "Update" : "Add Course"}
                    loading={loading}
                  />
                </div>
              </div>
            </form>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  );
}

import React, { ReactNode } from "react";

export default async function Layout({ children }: { children: ReactNode }) {
  // Add any permission checks here if needed
  return <div>{children}</div>;
}

import { notFound } from "next/navigation";
import { ProductUpdateForm } from "./product-update-form";
import { getProductById } from "@/services/products";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import { Suspense } from "react";
import EditProductLoading from "./edit-loading";

export default async function EditProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const id = (await params).id;
  const { data: product, success } = await getProductById(id);

  if (!product) {
    notFound();
  }

  // Mock options - replace with actual API calls
  const brandOptions = [
    { label: "Nike", value: "1" },
    { label: "Adidas", value: "2" },
  ];

  const categoryOptions = [
    { label: "Shoes", value: "1" },
    { label: "Clothing", value: "2" },
  ];

  const taxOptions = [
    { label: "VAT-18%", value: "1" },
    { label: "GST-12%", value: "2" },
  ];

  const unitOptions = [
    { label: "Piece-pcs", value: "1" },
    { label: "Kilogram-kg", value: "2" },
  ];

  return (
    <Suspense fallback={<EditProductLoading />}>
      <div className="container">
        <div className="mb-8 space-y-4">
          <div className="flex items-center gap-2">
            <Link href="/products">
              <Button variant="ghost" size="icon" className="rounded-full">
                <ArrowLeft className="h-5 w-5" />
                <span className="sr-only">Back to products</span>
              </Button>
            </Link>
            <div className="text-sm text-muted-foreground">
              <Link href="/products" className="hover:underline">
                Products
              </Link>{" "}
              / <span>Edit</span>
            </div>
          </div>

          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <h1 className="text-3xl font-bold tracking-tight">
                {product.name}
              </h1>
              <p className="text-muted-foreground mt-1">
                SKU: {product.sku} • Last updated:{" "}
                {new Date(product.updatedAt).toLocaleDateString()}
              </p>
            </div>
            <div className="flex items-center gap-2">
              <Button variant="outline">Preview</Button>
            </div>
          </div>
        </div>

        <ProductUpdateForm
          brandOptions={brandOptions}
          categoryOptions={categoryOptions}
          unitOptions={unitOptions}
          taxOptions={taxOptions}
          product={product}
        />
      </div>
    </Suspense>
  );
}

"use client";

import { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { BasicInfoTab } from "./tabs/basic-info-tab";
import { InventoryPricingTab } from "./tabs/inventory-pricing-tab";
import { AdditionalDetailsTab } from "./tabs/additional-details-tab";
import { ProductData } from "@/types/product";
import { cn } from "@/lib/utils";

export interface Option {
  label: string;
  value: string;
}

export function ProductUpdateForm({
  product,
  brandOptions,
  categoryOptions,
  taxOptions,
  unitOptions,
}: {
  product: ProductData;
  categoryOptions: Option[];
  taxOptions: Option[];
  unitOptions: Option[];
  brandOptions: Option[];
}) {
  const [activeTab, setActiveTab] = useState("basic-info");

  return (
    <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
      <TabsList className="w-full p-0 bg-transparent border-b rounded-none mb-6 relative">
        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-muted"></div>
        <TabsTrigger
          value="basic-info"
          className={cn(
            "py-3 px-6 rounded-none data-[state=active]:shadow-none relative",
            "data-[state=active]:text-primary data-[state=active]:font-medium",
            "after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:scale-x-0 data-[state=active]:after:scale-x-100 after:transition-transform"
          )}
        >
          Basic Information
        </TabsTrigger>
        <TabsTrigger
          value="inventory-pricing"
          className={cn(
            "py-3 px-6 rounded-none data-[state=active]:shadow-none relative",
            "data-[state=active]:text-primary data-[state=active]:font-medium",
            "after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:scale-x-0 data-[state=active]:after:scale-x-100 after:transition-transform"
          )}
        >
          Inventory & Pricing
        </TabsTrigger>
        <TabsTrigger
          value="additional-details"
          className={cn(
            "py-3 px-6 rounded-none data-[state=active]:shadow-none relative",
            "data-[state=active]:text-primary data-[state=active]:font-medium",
            "after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:scale-x-0 data-[state=active]:after:scale-x-100 after:transition-transform"
          )}
        >
          Additional Details
        </TabsTrigger>
      </TabsList>

      <TabsContent value="basic-info">
        <BasicInfoTab
          brandOptions={brandOptions}
          categoryOptions={categoryOptions}
          product={product}
        />
      </TabsContent>

      <TabsContent value="inventory-pricing">
        <InventoryPricingTab
          unitOptions={unitOptions}
          taxOptions={taxOptions}
          product={product}
        />
      </TabsContent>

      <TabsContent value="additional-details">
        <AdditionalDetailsTab product={product} />
      </TabsContent>
    </Tabs>
  );
}

"use client";

import { useState } from "react";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { toast } from "sonner";
import { ProductData } from "@/types/product";
import { updateProductById } from "@/services/products";
import { Option } from "../product-update-form";

export function BasicInfoTab({
  product,
  brandOptions,
  categoryOptions,
}: {
  product: ProductData;
  categoryOptions: Option[];
  brandOptions: Option[];
}) {
  return (
    <div className="grid gap-6 mt-6">
      <NameSlugCard product={product} />
      <SkuBarcodeCard product={product} />
      <DescriptionDimensionsCard product={product} />
      <WeightThumbnailCard product={product} />
      <CategoryBrandCard
        categoryOptions={categoryOptions}
        brandOptions={brandOptions}
        product={product}
      />
    </div>
  );
}

// SOAPI: Atomic Updates - Each card updates only related fields
function NameSlugCard({ product }: { product: ProductData }) {
  const [name, setName] = useState(product.name);
  const [slug, setSlug] = useState(product.slug);
  const [isUpdating, setIsUpdating] = useState(false);

  const handleUpdate = async () => {
    if (!name.trim()) {
      toast.error("Name is required");
      return;
    }

    setIsUpdating(true);

    try {
      // SOAPI: Atomic Updates - Only send changed fields
      const data = { name, slug };
      await updateProductById(product.id, data);
      toast.success("Name and slug updated successfully");
    } catch (error) {
      toast.error("Failed to update name and slug");
      console.error(error);
    } finally {
      setIsUpdating(false);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Basic Details</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-6">
        <div className="grid gap-3">
          <Label htmlFor="name">Name</Label>
          <Input
            id="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Product name"
          />
        </div>
        <div className="grid gap-3">
          <Label htmlFor="slug">Slug</Label>
          <Input
            id="slug"
            value={slug}
            onChange={(e) => setSlug(e.target.value)}
            placeholder="product-slug"
          />
        </div>
      </CardContent>
      <CardFooter>
        <Button onClick={handleUpdate} disabled={isUpdating}>
          {isUpdating ? "Updating..." : "Update Basic Details"}
        </Button>
      </CardFooter>
    </Card>
  );
}

function SkuBarcodeCard({ product }: { product: ProductData }) {
  const [sku, setSku] = useState(product.sku);
  const [barcode, setBarcode] = useState(product.barcode || "");
  const [isUpdating, setIsUpdating] = useState(false);

  const handleUpdate = async () => {
    if (!sku.trim()) {
      toast.error("SKU is required");
      return;
    }

    setIsUpdating(true);

    try {
      // SOAPI: Atomic Updates - Only changed fields
      const data = { sku, barcode: barcode || undefined };
      await updateProductById(product.id, data);
      toast.success("SKU and barcode updated successfully");
    } catch (error) {
      toast.error("Failed to update SKU and barcode");
      console.error(error);
    } finally {
      setIsUpdating(false);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Product Identifiers</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-6">
        <div className="grid gap-3">
          <Label htmlFor="sku">SKU</Label>
          <Input
            id="sku"
            value={sku}
            onChange={(e) => setSku(e.target.value)}
            placeholder="SKU123456"
          />
        </div>
        <div className="grid gap-3">
          <Label htmlFor="barcode">Barcode</Label>
          <Input
            id="barcode"
            value={barcode}
            onChange={(e) => setBarcode(e.target.value)}
            placeholder="123456789012"
          />
        </div>
      </CardContent>
      <CardFooter>
        <Button onClick={handleUpdate} disabled={isUpdating}>
          {isUpdating ? "Updating..." : "Update Identifiers"}
        </Button>
      </CardFooter>
    </Card>
  );
}

function DescriptionDimensionsCard({ product }: { product: ProductData }) {
  const [description, setDescription] = useState(product.description || "");
  const [dimensions, setDimensions] = useState(product.dimensions || "");
  const [isUpdating, setIsUpdating] = useState(false);

  const handleUpdate = async () => {
    setIsUpdating(true);

    try {
      const data = {
        description: description || undefined,
        dimensions: dimensions || undefined,
      };
      await updateProductById(product.id, data);
      toast.success("Description and dimensions updated successfully");
    } catch (error) {
      toast.error("Failed to update description and dimensions");
      console.error(error);
    } finally {
      setIsUpdating(false);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Product Description</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-6">
        <div className="grid gap-3">
          <Label htmlFor="description">Description</Label>
          <Textarea
            id="description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder="Product description"
            rows={3}
          />
        </div>
        <div className="grid gap-3">
          <Label htmlFor="dimensions">Dimensions</Label>
          <Input
            id="dimensions"
            value={dimensions}
            onChange={(e) => setDimensions(e.target.value)}
            placeholder="10x20x30 cm"
          />
        </div>
      </CardContent>
      <CardFooter>
        <Button onClick={handleUpdate} disabled={isUpdating}>
          {isUpdating ? "Updating..." : "Update Description"}
        </Button>
      </CardFooter>
    </Card>
  );
}

function WeightThumbnailCard({ product }: { product: ProductData }) {
  const [weight, setWeight] = useState(product.weight?.toString() || "");
  const [thumbnail, setThumbnail] = useState(product.thumbnail || "");
  const [isUpdating, setIsUpdating] = useState(false);

  const handleUpdate = async () => {
    setIsUpdating(true);

    try {
      const data = {
        weight: weight ? Number.parseFloat(weight) : undefined,
        thumbnail: thumbnail || undefined,
      };
      await updateProductById(product.id, data);
      toast.success("Weight and thumbnail updated successfully");
    } catch (error) {
      toast.error("Failed to update weight and thumbnail");
      console.error(error);
    } finally {
      setIsUpdating(false);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Weight & Thumbnail</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-6">
        <div className="grid gap-3">
          <Label htmlFor="weight">Weight (kg)</Label>
          <Input
            id="weight"
            type="number"
            step="0.01"
            value={weight}
            onChange={(e) => setWeight(e.target.value)}
            placeholder="1.5"
          />
        </div>
        <div className="grid gap-3">
          <Label htmlFor="thumbnail">Thumbnail URL</Label>
          <Input
            id="thumbnail"
            value={thumbnail}
            onChange={(e) => setThumbnail(e.target.value)}
            placeholder="https://example.com/image.jpg"
          />
        </div>
      </CardContent>
      <CardFooter>
        <Button onClick={handleUpdate} disabled={isUpdating}>
          {isUpdating ? "Updating..." : "Update Weight & Thumbnail"}
        </Button>
      </CardFooter>
    </Card>
  );
}

function CategoryBrandCard({
  product,
  brandOptions,
  categoryOptions,
}: {
  product: ProductData;
  categoryOptions: Option[];
  brandOptions: Option[];
}) {
  const [categoryId, setCategoryId] = useState(product.categoryId || "");
  const [brandId, setBrandId] = useState(product.brandId || "");
  const [isUpdating, setIsUpdating] = useState(false);

  const handleUpdate = async () => {
    setIsUpdating(true);

    try {
      const data = {
        categoryId: categoryId || undefined,
        brandId: brandId || undefined,
      };
      await updateProductById(product.id, data);
      toast.success("Category and brand updated successfully");
    } catch (error) {
      toast.error("Failed to update category and brand");
      console.error(error);
    } finally {
      setIsUpdating(false);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Category & Brand</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-6">
        <div className="grid gap-3">
          <Label htmlFor="category">Category</Label>
          <select
            id="category"
            value={categoryId}
            onChange={(e) => setCategoryId(e.target.value)}
            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
          >
            <option value="">Select Category</option>
            {categoryOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>
        <div className="grid gap-3">
          <Label htmlFor="brand">Brand</Label>
          <select
            id="brand"
            value={brandId}
            onChange={(e) => setBrandId(e.target.value)}
            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
          >
            <option value="">Select Brand</option>
            {brandOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>
      </CardContent>
      <CardFooter>
        <Button onClick={handleUpdate} disabled={isUpdating}>
          {isUpdating ? "Updating..." : "Update Category & Brand"}
        </Button>
      </CardFooter>
    </Card>
  );
}