Merge pull request #6 from scituinsk/slicing-design-app

refactor: enhance Button and Card components, update Dashboard layout…

Author: ahmaddzidnii

src/components/ui/button.jsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { forwardRef, cloneElement, isValidElement } from "react";
 import { cva } from "class-variance-authority";
 import { Button as AriaButton } from "react-aria-components";
 
@@ -50,11 +50,22 @@ const buttonVariants = cva(
   }
 );
 
-const Button = forwardRef(({ className, variant, size, rounded, children, ...props }, ref) => {
+const Button = forwardRef(({ className, variant, size, rounded, asChild = false, children, ...props }, ref) => {
+  const buttonClasses = cn(buttonVariants({ variant, size, rounded, className }));
+
+  if (asChild && isValidElement(children)) {
+    return cloneElement(children, {
+      ref,
+      className: cn(buttonClasses, children.props.className),
+      ...props,
+      ...children.props,
+    });
+  }
+
   return (
     <AriaButton
       ref={ref}
-      className={cn(buttonVariants({ variant, size, rounded, className }))}
+      className={buttonClasses}
       {...props}
     >
       {children}

src/components/ui/card.jsx

@@ -1,20 +1,15 @@
 import React from "react";
 import { cn } from "../../utils/cn";
 
-// Card: Container utama
 const Card = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
-      "rounded-lg border border-zinc-200 bg-white text-zinc-950 shadow-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
-      className
-    )}
+    className={cn("rounded-lg border border-zinc-200 bg-white text-zinc-950 shadow-sm", className)}
     {...props}
   />
 ));
 Card.displayName = "Card";
 
-// CardHeader: Wrapper untuk bagian atas card
 const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
@@ -24,7 +19,6 @@ const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
 ));
 CardHeader.displayName = "CardHeader";
 
-// CardTitle: Judul di dalam CardHeader (pakai <h3>)
 const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
   <h3
     ref={ref}
@@ -34,7 +28,6 @@ const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
 ));
 CardTitle.displayName = "CardTitle";
 
-// CardDescription: Teks deskripsi di dalam CardHeader (pakai <p>)
 const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
   <p
     ref={ref}
@@ -44,7 +37,6 @@ const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
 ));
 CardDescription.displayName = "CardDescription";
 
-// CardContent: Area konten utama
 const CardContent = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
@@ -54,7 +46,6 @@ const CardContent = React.forwardRef(({ className, ...props }, ref) => (
 ));
 CardContent.displayName = "CardContent";
 
-//  CardFooter: Wrapper untuk bagian bawah card
 const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}

src/components/ui/input.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { TextField as AriaTextField, Label as AriaLabel, Input as AriaInput, Text as AriaText } from "react-aria-components";
-import { cn } from "../../utils/cn"; // Sesuaikan path
 
-// --- 1. Container Utama (Otak dari Field) ---
+import { cn } from "../../utils/cn";
+
 const TextField = React.forwardRef(({ className, ...props }, ref) => (
   <AriaTextField
     ref={ref}
@@ -12,7 +12,6 @@ const TextField = React.forwardRef(({ className, ...props }, ref) => (
 ));
 TextField.displayName = "TextField";
 
-// --- 2. Label ---
 const Label = React.forwardRef(({ className, ...props }, ref) => (
   <AriaLabel
     ref={ref}
@@ -22,26 +21,22 @@ const Label = React.forwardRef(({ className, ...props }, ref) => (
 ));
 Label.displayName = "Label";
 
-// --- 3. Input ---
 const Input = React.forwardRef(({ className, ...props }, ref) => (
   <AriaInput
     ref={ref}
     className={cn(
       "flex h-10 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm",
       "ring-offset-white placeholder:text-zinc-500",
-      // Warna focus ring sudah disesuaikan dengan hex #326765
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#326765] focus-visible:ring-offset-2",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      "dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus-visible:ring-[#326765]",
-      "data-[invalid]:border-red-500 dark:data-[invalid]:border-red-700",
+      "data-[invalid]:border-red-500 ",
       className
     )}
     {...props}
   />
 ));
 Input.displayName = "Input";
 
-// --- 4. Teks Bantuan & Error Message ---
 const Text = React.forwardRef(({ className, ...props }, ref) => (
   <AriaText
     ref={ref}

src/constants/core-app-config.jsx

@@ -3,10 +3,6 @@ export const CORE_APP_NAV_ITEMS = [
     label: "Dashboard",
     href: "/app/dashboard",
   },
-  {
-    label: "Schedule",
-    href: "/app/schedule",
-  },
   {
     label: "History",
     href: "/app/history",

src/features/core-app/components/dashboard/sensor-card-footer.jsx

@@ -9,7 +9,7 @@ export const SensorCardFooter = ({ icon, label, value, status }) => {
 
       {/* Value atau status */}
       {status ? (
-        <span className="mt-1 px-3 py-1 rounded-full bg-green-400 text-black text-sm font-medium">{status}</span>
+        <p className=" inline-block mt-1 px-3 py-1 rounded-full bg-green-400 text-black text-sm font-medium">{status}</p>
       ) : (
         <p className="mt-1 text-base">{value}</p>
       )}

src/pages/core-app/dashboard-page.jsx

@@ -1,10 +1,11 @@
 import { FaPlus } from "react-icons/fa6";
+import { FaSearch } from "react-icons/fa";
+
 import { Button } from "../../components/ui/button";
-import { Card, CardContent, CardHeader } from "../../components/ui/card";
 import { TextField, Input } from "../../components/ui/input";
+import { Card, CardContent, CardHeader } from "../../components/ui/card";
 
 import { SensorCardFooter } from "../../features/core-app/components/dashboard/sensor-card-footer";
-import { FaSearch } from "react-icons/fa";
 
 export const DashboardPage = () => {
   return (
@@ -72,7 +73,7 @@ export const DashboardPage = () => {
 
         <div className="grid grid-cols-12 gap-4 md:gap-2">
           {/* Input Pencarian */}
-          <div className="col-span-12 md:col-span-9 h-[54px]">
+          <div className="col-span-12 lg:col-span-9 h-[54px]">
             <div className="relative h-full w-full">
               <FaSearch
                 aria-hidden="true"
@@ -93,15 +94,14 @@ export const DashboardPage = () => {
           </div>
 
           {/* Tombol Filter */}
-          <div className="col-span-3 md:col-span-1 bg-white size-[54px] aspect-square rounded-full mx-auto flex items-center justify-center">
+          <div className="col-span-3 lg:col-span-1 bg-white size-[54px] aspect-square rounded-full mx-auto flex items-center justify-center">
             <svg
               width={19}
               height={19}
               viewBox="0 0 19 19"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
-              {/* ... (SVG path tidak berubah) ... */}
               <path
                 d="M7.0875 1.18164C6.35435 1.18126 5.63914 1.40827 5.04042 1.83139C4.44169 2.25452 3.98894 2.85293 3.74456 3.54414H0V5.90664H3.74456C3.98861 6.5983 4.44119 7.19724 5.03992 7.62088C5.63865 8.04453 6.35405 8.27204 7.0875 8.27204C7.82095 8.27204 8.53635 8.04453 9.13508 7.62088C9.73381 7.19724 10.1864 6.5983 10.4304 5.90664H18.9V3.54414H10.4304C10.1861 2.85293 9.73331 2.25452 9.13458 1.83139C8.53586 1.40827 7.82064 1.18126 7.0875 1.18164ZM5.90625 4.72539C5.90625 4.4121 6.0307 4.11165 6.25223 3.89012C6.47376 3.66859 6.77421 3.54414 7.0875 3.54414C7.40079 3.54414 7.70124 3.66859 7.92277 3.89012C8.1443 4.11165 8.26875 4.4121 8.26875 4.72539C8.26875 5.03868 8.1443 5.33913 7.92277 5.56066C7.70124 5.78219 7.40079 5.90664 7.0875 5.90664C6.77421 5.90664 6.47376 5.78219 6.25223 5.56066C6.0307 5.33913 5.90625 5.03868 5.90625 4.72539ZM11.8125 10.6316C11.0794 10.6313 10.3641 10.8583 9.76542 11.2814C9.16669 11.7045 8.71394 12.3029 8.46956 12.9941H0V15.3566H8.46956C8.71361 16.0483 9.16619 16.6472 9.76492 17.0709C10.3636 17.4945 11.079 17.722 11.8125 17.722C12.546 17.722 13.2613 17.4945 13.8601 17.0709C14.4588 16.6472 14.9114 16.0483 15.1554 15.3566H18.9V12.9941H15.1554C14.9111 12.3029 14.4583 11.7045 13.8596 11.2814C13.2609 10.8583 12.5456 10.6313 11.8125 10.6316ZM10.6312 14.1754C10.6312 13.8621 10.7557 13.5616 10.9772 13.3401C11.1988 13.1186 11.4992 12.9941 11.8125 12.9941C12.1258 12.9941 12.4262 13.1186 12.6478 13.3401C12.8693 13.5616 12.9937 13.8621 12.9937 14.1754C12.9937 14.4887 12.8693 14.7891 12.6478 15.0107C12.4262 15.2322 12.1258 15.3566 11.8125 15.3566C11.4992 15.3566 11.1988 15.2322 10.9772 15.0107C10.7557 14.7891 10.6312 14.4887 10.6312 14.1754Z"
                 fill="#326765"
@@ -110,7 +110,7 @@ export const DashboardPage = () => {
           </div>
 
           {/* Tombol Tambah Module */}
-          <div className="col-span-9 md:col-span-2">
+          <div className="col-span-9 lg:col-span-2">
             <Button
               className="h-[54px] w-full inline-flex text-base"
               variant="outline"
@@ -123,8 +123,8 @@ export const DashboardPage = () => {
       {/* Ringkasan Module */}
       <div className="w-full">
         <h2 className="font-semibold  text-lg lg:text-[20px] tracking-wider my-5">Ringkasan Modul</h2>
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 ">
-          {Array.from({ length: 3 }).map((_, i) => (
+        <div className="grid grid-cols-1  lg:grid-cols-2 xl:grid-cols-3 gap-4 ">
+          {Array.from({ length: 6 }).map((_, i) => (
             <Card
               className="overflow-hidden"
               key={i}
@@ -171,7 +171,7 @@ export const DashboardPage = () => {
                 </div>
               </CardHeader>
               <CardContent className="p-4 bg-[#326765] text-white">
-                <div className="grid grid-cols-4 justify-center gap-8">
+                <div className="flex justify-between items-center gap-4">
                   <SensorCardFooter
                     icon={
                       <svg

src/pages/core-app/schedule-page.jsx

@@ -18,16 +18,19 @@ export const HomePage = () => {
       >
         <div className="container mx-auto px-6 lg:px-[89px] pt-0 lg:pt-32">
           <div className="max-w-full lg:max-w-[665px] text-center lg:text-left">
-            <h1 className="text-4xl md:text-5xl lg:text-[64px] font-semibold text-white">Selamat Datang di Pak Tani!</h1>
-            <p className="text-lg md:text-xl lg:text-[24px] text-white mt-2">
+            {/* Penyesuaian font H1 */}
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white">Selamat Datang di Pak Tani!</h1>
+            {/* Penyesuaian font Paragraf */}
+            <p className="text-base md:text-lg lg:text-xl text-white mt-2">
               Kelola dan pantau sistem irigasi pertanian Anda dengan mudah, langsung dari genggaman Anda.
             </p>
 
             <div className="mt-8 lg:mt-[46px]">
               <Button
                 variant="outline"
                 size="lg"
-                className="h-auto py-3 lg:h-[62px] px-8 lg:px-12 text-lg lg:text-[24px] text-[#326765] bg-white rounded-[15px]"
+                asChild
+                className="h-auto py-3 lg:h-[62px] px-8 lg:px-12 text-md md:text-lg lg:text-xl text-[#326765] bg-white rounded-[15px]"
               >
                 <Link to="/app/dashboard">Mulai Sekarang</Link>
               </Button>
@@ -40,8 +43,12 @@ export const HomePage = () => {
       <div className="py-16 lg:mt-[87px] lg:py-0">
         <div className="container mx-auto px-6 lg:px-[89px] flex flex-col">
           <div className="mx-auto w-full lg:w-[505px] text-center">
-            <h2 className="text-3xl lg:text-[36px] font-semibold">Fitur - fitur</h2>
-            <p className="text-base lg:text-[20px] text-[#7d7d7d] mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </p>
+            {/* Penyesuaian font H2 */}
+            <h2 className="text-2xl md:text-3xl lg:text-4xl font-semibold">Fitur - fitur</h2>
+            {/* Penyesuaian font Paragraf */}
+            <p className="text-sm md:text-base lg:text-lg text-[#7d7d7d] mt-2">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod{" "}
+            </p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-12 lg:mt-[61px] gap-8 lg:gap-[58px]">
             {FEATURES.map((feature, i) => (
@@ -51,8 +58,10 @@ export const HomePage = () => {
               >
                 <div className="flex flex-col items-center gap-4 text-center">
                   {feature.icon}
-                  <h3 className="font-semibold text-xl lg:text-[24px] text-[#326765] mt-2">{feature.title}</h3>
-                  <p className="text-base lg:text-[18px] leading-relaxed lg:leading-[24px] text-center text-[#7d7d7d]">{feature.description}</p>
+                  {/* Penyesuaian font H3 di dalam kartu */}
+                  <h3 className="font-semibold text-xl lg:text-2xl text-[#326765] mt-2">{feature.title}</h3>
+                  {/* Penyesuaian font Paragraf di dalam kartu */}
+                  <p className="text-base leading-relaxed lg:leading-[24px] text-center text-[#7d7d7d]">{feature.description}</p>
                 </div>
               </div>
             ))}

src/pages/landing-page/home-page.jsx

@@ -9,7 +9,6 @@ import { HomePage } from "./pages/landing-page/home-page";
 import { NotFoundPage } from "./pages/common/not-found";
 import { InternalServerError } from "./pages/common/internal-server-error";
 import { DashboardPage } from "./pages/core-app/dashboard-page";
-import { SchedulePage } from "./pages/core-app/schedule-page";
 import { HistoryPage } from "./pages/core-app/history-page";
 
 //======================================================================
@@ -21,7 +20,6 @@ const router = createBrowserRouter([
     errorElement: <InternalServerError />,
     element: <GlobalLayout />,
     children: [
-      // Public routes with LandingPageLayout
       {
         path: "/",
         element: <LandingPageLayout />,
@@ -40,10 +38,9 @@ const router = createBrowserRouter([
           },
         ],
       },
-      // Protected routes (bisa ditambahkan layout khusus)
       {
         path: "profile",
-        element: <div>Profile Page</div>, // TODO: Tambahkan layout untuk protected routes
+        element: <div>Profile Page</div>,
       },
       // Auth routes with AuthLayout
       {
@@ -68,10 +65,6 @@ const router = createBrowserRouter([
             path: "dashboard",
             element: <DashboardPage />,
           },
-          {
-            path: "schedule",
-            element: <SchedulePage />,
-          },
           {
             path: "history",
             element: <HistoryPage />,