Add item and GRN tracking forms

distribution_fe/app/(dashboard)/configuration/page.tsx

@@ -1,27 +1,8 @@
 'use client'
 
-import Link from 'next/link'
-import { HugeiconsIcon } from '@hugeicons/react'
-import { Package01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons'
-import { Card, CardHeader, CardTitle, CardDescription, CardAction } from '@/components/ui/card'
+import { ProductCapabilitiesCard } from './_components/product-capabilities-card'
 
-interface ConfigCategory {
-  title: string
-  description: string
-  href: string
-  icon: typeof Package01Icon
-}
-
-const CATEGORIES: ConfigCategory[] = [
-  {
-    title: 'Products',
-    description: 'Serial number, batch, expiry and warranty tracking for catalogue items',
-    href: '/configuration/products',
-    icon: Package01Icon,
-  },
-]
-
-export default function configurationPage() {
+export default function ConfigurationPage() {
   return (
     <div className="flex flex-col gap-6">
       <div>
@@ -29,26 +10,7 @@ export default function configurationPage() {
         <p className="text-sm text-muted-foreground mt-0.5">System-wide settings, grouped by area</p>
       </div>
 
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        {CATEGORIES.map((category) => (
-          <Link key={category.href} href={category.href} className="block">
-            <Card className="h-full transition-shadow hover:shadow-md">
-              <CardHeader>
-                <div className="flex items-center gap-3">
-                  <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
-                    <HugeiconsIcon icon={category.icon} size={18} />
-                  </div>
-                  <CardTitle>{category.title}</CardTitle>
-                </div>
-                <CardDescription className="mt-3">{category.description}</CardDescription>
-                <CardAction>
-                  <HugeiconsIcon icon={ArrowRight01Icon} size={16} className="text-muted-foreground" />
-                </CardAction>
-              </CardHeader>
-            </Card>
-          </Link>
-        ))}
-      </div>
+      <ProductCapabilitiesCard />
     </div>
   )
 }