AI Review Center

Commit Review Workspace ?

Select a commit on the left to inspect quality, security, business value, findings, and suggested code changes.
Showing AI reviews for avriti
Project AI Score ?
63%
Quality Avg ?
68%
Security Avg ?
45%
Reviews ?
56

Review Result ?

jattin01/avriti · 432ef877
The commit adds multiple new state variables and props related to product details for an enhanced product page feature. It includes UI updates for displaying more detailed product information, images, and accordions. While the new data fields and UI improvements add business value, the commit message is unclear and contains a typo, impacting maintainability. Usage of 'dangerouslySetInnerHTML' poses a moderate security risk if the input is not sanitized. There are some redundant null checks and potential improvements in code documentation and consistency.
Quality ?
75%
Security ?
40%
Business Value ?
70%
Maintainability ?
75%
Issues & Suggested Fixes ?
1AI detects the issue
2Shows file, line, or evidence
3Suggests the fix to apply
Unclear And Typo In Message
Where commit message
Issue / Evidence unclear and typo in message
Suggested Fix improve clarity and fix typo to enhance commit quality
Use Of Dangerouslysetinnerhtml Without Men...
Where components/product-accordion.tsx:135
Issue / Evidence use of dangerouslySetInnerHTML without mentioning sanitization
Suggested Fix add input sanitization or mention it to improve security
Multiple Usestate Declarations Could Be Op...
Where app/shop/[slug]/page.tsx:43-52
Issue / Evidence multiple useState declarations could be optimized
Suggested Fix consider using a single state object or reducer to improve code maintainability and reduce boilerplate
Image Component Usage
Where app/shop/page.tsx:346-352
Issue / Evidence Image component usage
Suggested Fix add explicit width and height props for better performance and layout stability
Repetitive Markup For Shipping And Return...
Where components/product-accordion.tsx:194,255
Issue / Evidence repetitive markup for shipping and return notes
Suggested Fix consider extracting to a reusable component or constant to improve code quality
Img Tag Used Instead Of Next/Image
Where components/ProductDetailSection.tsx:118-121
Issue / Evidence img tag used instead of next/Image
Suggested Fix consider using Next.js Image component for better optimization and security
Lacks Description Of The Change
Where commit message
Issue / Evidence lacks description of the change
Suggested Fix add a descriptive message explaining the purpose and scope of the commit to enhance business and code clarity
Code Change Preview · app/shop/[slug]/page.tsx ?
Removed / Before Commit
- const [storageInstructions, setStorageInstructions] = useState("");
- const [countryOfOrigin, setCountryOfOrigin] = useState("");
- const [oneLineMeaning, setOneLineMeaning] = useState("");
- 
- useEffect(() => {
- fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/product`)
- setStorageInstructions(currentProduct?.storage_instructions ?? "");
- setCountryOfOrigin(currentProduct?.country_of_origin ?? "");
- setOneLineMeaning(currentProduct?.one_line_meaning ?? "");
- 
- const relatedProducts = currentProduct
- ? data.data.filter((p: any) => p.category_id === currentProduct.category_id && p.slug !== slug).slice(0, 3)
- storageInstructions={storageInstructions}
- countryOfOrigin={countryOfOrigin}
- oneLineMeaning={oneLineMeaning}
- />
- 
- {/* Related Products */}
Added / After Commit
+ const [storageInstructions, setStorageInstructions] = useState("");
+ const [countryOfOrigin, setCountryOfOrigin] = useState("");
+ const [oneLineMeaning, setOneLineMeaning] = useState("");
+   const [about, setAbout] = useState("");
+   const [chakraAlignment, setChakraAlignment] = useState("");
+   const [zodiacAffinity, setZodiacAffinity] = useState("");
+   const [productDetails, setProductDetails] = useState("");
+   const [closingTagline, setClosingTagline] = useState("");
+   const [cleansing, setCleansing] = useState("");
+   const [charging, setCharging] = useState("");
+   const [wearing, setWearing] = useState("");
+   const [dailyUse, setDailyUse] = useState("");
+   const [whatToExpect, setWhatToExpect] = useState("");
+ 
+ useEffect(() => {
+ fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/product`)
+ setStorageInstructions(currentProduct?.storage_instructions ?? "");
+ setCountryOfOrigin(currentProduct?.country_of_origin ?? "");
Removed / Before Commit
- // thumbnail[0]
- const image = product.thumbnail?.[0]
- ? `${process.env.NEXT_PUBLIC_API_URL}/${product.thumbnail[0]}`
-                     : '/product2.jpeg';
- 
- const attr1 = product.attributes?.find((attr) => attr.in_stock)
- ?? product.attributes?.find((attr) => attr.sr_no === 1);
- </button></div>
- <div className="relative aspect-[4/5] overflow-hidden">
- <div className="absolute inset-5 rounded-full bg-[radial-gradient(circle,rgba(12,62,187,0.13),transparent_62%)]" />
-                           <Image
-                             src={image}
-                             alt={product.title}
-                             fill
-                             sizes="(min-width: 1280px) 24vw, 50vw"
-                             className="object-contain p-8 mix-blend-multiply transition duration-300 group-hover:scale-105"
-                           />
- </div>
Added / After Commit
+ // thumbnail[0]
+ const image = product.thumbnail?.[0]
+ ? `${process.env.NEXT_PUBLIC_API_URL}/${product.thumbnail[0]}`
+                     : null;
+ 
+ const attr1 = product.attributes?.find((attr) => attr.in_stock)
+ ?? product.attributes?.find((attr) => attr.sr_no === 1);
+ </button></div>
+ <div className="relative aspect-[4/5] overflow-hidden">
+ <div className="absolute inset-5 rounded-full bg-[radial-gradient(circle,rgba(12,62,187,0.13),transparent_62%)]" />
+                           {image ? (
+                             <Image
+                               src={image}
+                               alt={product.title}
+                               fill
+                               sizes="(min-width: 1280px) 24vw, 50vw"
+                               className="object-contain p-8 mix-blend-multiply transition duration-300 group-hover:scale-105"
+                             />
Removed / Before Commit
- storageInstructions?: string;
- countryOfOrigin?: string;
- oneLineMeaning?: string;
- };
- 
- export default function ProductAccordion({
- storageInstructions,
- countryOfOrigin,
- oneLineMeaning,
- }: ProductAccordionProps) {
- const sections: AccordionItem[] = [
-     {
-       title: "Disclaimer",
-       defaultOpen: false,
-       content: disclaimer ? (
-         <div
-           className="prose prose-sm max-w-none [&_p]:mb-3 [&_p:last-child]:mb-0"
-           dangerouslySetInnerHTML={{ __html: disclaimer }}
Added / After Commit
+ storageInstructions?: string;
+ countryOfOrigin?: string;
+ oneLineMeaning?: string;
+   about?: string;
+   chakraAlignment?: string;
+   zodiacAffinity?: string;
+   productDetails?: string;
+   closingTagline?: string;
+   cleansing?: string;
+   charging?: string;
+   wearing?: string;
+   dailyUse?: string;
+   whatToExpect?: string;
+ };
+ 
+ export default function ProductAccordion({
+ storageInstructions,
+ countryOfOrigin,
Removed / Before Commit
- slug: string;
- short_description?: string;
- one_line_meaning?: string;
- fragrance?: string[];
- sold_as?: string[];
- attributes?: Attribute[];
- 
- // // Old: const imageUrl = product.thumbnail?.[0] ? `${apiUrl}/${product.thumbnail[0]}` : "/product2.jpeg";
- const allImages = (product.thumbnail ?? []).map((t) => `${apiUrl}/${t}`);
-   const imageUrl = activeImg ?? allImages[0] ?? "/product2.jpeg";
- 
- const sellingPrice = selectedAttr?.selling_price ?? null;
- const mrp = selectedAttr?.mrp ?? null;
- 
- return (
- <section className="">
-       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-[40px] mb-[50px] mb:my-[80px]">
- <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-14 items-start">
Added / After Commit
+ slug: string;
+ short_description?: string;
+ one_line_meaning?: string;
+   closing_tagline?: string;
+ fragrance?: string[];
+ sold_as?: string[];
+ attributes?: Attribute[];
+ 
+ // // Old: const imageUrl = product.thumbnail?.[0] ? `${apiUrl}/${product.thumbnail[0]}` : "/product2.jpeg";
+ const allImages = (product.thumbnail ?? []).map((t) => `${apiUrl}/${t}`);
+   const imageUrl = activeImg ?? allImages[0] ?? null;
+ 
+ const sellingPrice = selectedAttr?.selling_price ?? null;
+ const mrp = selectedAttr?.mrp ?? null;
+ 
+ return (
+ <section className="">
+       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-[40px] mb-[28px] mb:my-[80px]">