UI changes | Variant Fixes | Minor updates

[ADMIN]
- redisigned UI
    - added left side navbar
    - added lucid-react icons
    - created new layout for product-form
- fixed add variant to product
- added react-color and color-picker into Color Value Input

[STORE]
- started creating logic for filtering products and useCart

Author: rabbit-top-dev-212

TODO.txt

@@ -1,11 +1,9 @@
 [ADMIN]
-- connected all routes from chekout and webhook to Stripe payments
-- manage error handling in there are not enough products in store (toast message of what item is missing)
-[STORE]
-- redisigned cart-item tab and cart-item-dialog
-- created  
-- added additionl summary of products to Checkout
-- added className attribute to Currency
-- implemented skeleton loading for products
-- created new gallery and adapted it to modal-dialog
-- changed billboard in categories
+- redisigned UI
+    - added left side navbar
+    - added lucid-react icons
+    - created new layout for product-form
+- fixed add variant to product
+- added react-color and color-picker into Color Value Input 
+
+[STORE]

ecommerce-admin/app/(dashboard)/[storeId]/(routes)/billboards/[billboardId]/page.tsx

@@ -13,7 +13,7 @@ const BillboardPage = async ({
   });
 
   return (
-    <div className="flex-col">
+    <div className="flex-col ml-56">
       <div className="flex-1 p-8 pt-6 space-y-4">
         <BillboardForm initialData={billboard} />
       </div>

ecommerce-admin/app/(dashboard)/[storeId]/(routes)/billboards/page.tsx

@@ -22,7 +22,7 @@ const BillboardsPage = async ({ params }: { params: { storeId: string } }) => {
   }));
 
   return (
-    <div className="flex-col">
+    <div className="flex-col ml-56">
       <div className="flex-1 p-8 pt-6 space-y-4">
         <BillboardsClient data={formattedBillboards} />
       </div>

ecommerce-admin/app/(dashboard)/[storeId]/(routes)/categories/[categoryId]/page.tsx

@@ -20,7 +20,7 @@ const CategoryPage = async ({
   });
 
   return (
-    <div className="flex-col">
+    <div className="flex-col ml-56">
       <div className="flex-1 p-8 pt-6 space-y-4">
         <CategoryForm initialData={category} billboards={billboards} />
       </div>

ecommerce-admin/app/(dashboard)/[storeId]/(routes)/categories/page.tsx

@@ -26,7 +26,7 @@ const CategoriesPage = async ({ params }: { params: { storeId: string } }) => {
   }));
 
   return (
-    <div className="flex-col">
+    <div className="flex-col ml-56">
       <div className="flex-1 p-8 pt-6 space-y-4">
         <CategoriesClient data={formattedCategories} />
       </div>

ecommerce-admin/app/(dashboard)/[storeId]/(routes)/colors/[colorId]/components/color-form.tsx

@@ -6,9 +6,10 @@ import { useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { toast } from "react-hot-toast";
 import { Color } from "@prisma/client";
-import { Trash } from "lucide-react";
+import { Palette, Trash } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { SketchPicker } from "react-color";
 
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -41,6 +42,8 @@ export const ColorForm: React.FC<ColorFormProps> = ({ initialData }) => {
 
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [color, setColor] = useState("Pick a color...");
+  const [displayColorPicker, setDisplayColorPicker] = useState(false);
 
   const title = initialData ? "Edit color" : "Create color";
   const description = initialData ? "Edit color" : "Add a new color";
@@ -55,6 +58,19 @@ export const ColorForm: React.FC<ColorFormProps> = ({ initialData }) => {
     },
   });
 
+  const popover: React.CSSProperties = {
+    position: "absolute",
+    zIndex: "2",
+  };
+
+  const cover: React.CSSProperties = {
+    position: "fixed",
+    top: "0px",
+    right: "0px",
+    bottom: "0px",
+    left: "0px",
+  };
+
   const onSubmit = async (data: ColorFormValues) => {
     try {
       setLoading(true);
@@ -118,7 +134,7 @@ export const ColorForm: React.FC<ColorFormProps> = ({ initialData }) => {
           onSubmit={form.handleSubmit(onSubmit)}
           className="w-full space-y-8"
         >
-          <div className="grid grid-cols-3 gap-8">
+          <div className="grid grid-cols-4 gap-8">
             <FormField
               control={form.control}
               name="name"
@@ -142,13 +158,34 @@ export const ColorForm: React.FC<ColorFormProps> = ({ initialData }) => {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Value</FormLabel>
-                  <FormControl>
-                    <Input
-                      disabled={loading}
-                      placeholder="Color value"
-                      {...field}
-                    />
-                  </FormControl>
+                  <div>
+                    <FormControl>
+                      <Input
+                        disabled={loading}
+                        placeholder="Color value"
+                        {...field}
+                        value={color}
+                        onClick={() =>
+                          setDisplayColorPicker(!displayColorPicker)
+                        }
+                      />
+                    </FormControl>
+                    {displayColorPicker ? (
+                      <div style={popover}>
+                        <div
+                          style={cover}
+                          onClick={() => setDisplayColorPicker(false)}
+                        />
+                        <SketchPicker
+                          color={color}
+                          onChange={(updatedColor) => {
+                            setColor(updatedColor.hex);
+                            form.setValue("value", updatedColor.hex);
+                          }}
+                        />
+                      </div>
+                    ) : null}
+                  </div>{" "}
                   <FormMessage />
                 </FormItem>
               )}

ecommerce-admin/app/(dashboard)/[storeId]/(routes)/colors/[colorId]/page.tsx

@@ -9,7 +9,7 @@ const ColorPage = async ({ params }: { params: { colorId: string } }) => {
   });
 
   return (
-    <div className="flex-col">
+    <div className="flex-col ml-56">
       <div className="flex-1 p-8 pt-6 space-y-4">
         <ColorForm initialData={color} />
       </div>

ecommerce-admin/app/(dashboard)/[storeId]/(routes)/colors/page.tsx

@@ -23,7 +23,7 @@ const ColorsPage = async ({ params }: { params: { storeId: string } }) => {
   }));
 
   return (
-    <div className="flex-col">
+    <div className="flex-col ml-56">
       <div className="flex-1 p-8 pt-6 space-y-4">
         <ColorsClient data={formattedColors} />
       </div>

ecommerce-admin/app/(dashboard)/[storeId]/(routes)/orders/page.tsx

@@ -40,7 +40,7 @@ const OrdersPage = async ({ params }: { params: { storeId: string } }) => {
   }));
 
   return (
-    <div className="flex-col">
+    <div className="flex-col ml-56">
       <div className="flex-1 p-8 pt-6 space-y-4">
         <OrderClient data={formattedOrders} />
       </div>

ecommerce-admin/app/(dashboard)/[storeId]/(routes)/page.tsx

@@ -23,7 +23,7 @@ const DashboardPage: React.FC<DashboardPageProps> = async ({ params }) => {
   const stockCount = await getStockCount(params.storeId);
 
   return (
-    <div className="flex-col">
+    <div className="flex-col ml-56">
       <div className="flex-1 p-8 pt-6 space-y-4">
         <Heading title="Dashboard" description="Overview of your store" />
         <Separator />