UI changes

2026-10-02 13:17:32 +05:30
parent bfd3e5cded
commit 9707ef596c
3 changed files with 99 additions and 8 deletions
@@ -0,0 +1,54 @@
+'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'
+
+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() {
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="text-2xl font-semibold text-foreground">Configuration</h1>
+        <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>
+    </div>
+  )
+}