feat: update label and separator components for improved styling; refactor transaction create/edit pages and add field components

resources/js/components/ui/field.tsx

@@ -0,0 +1,246 @@
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

resources/js/components/ui/label.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { Label as LabelPrimitive } from "radix-ui"
 
@@ -13,7 +11,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-xs/relaxed leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
       )}
       {...props}

resources/js/components/ui/separator.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { Separator as SeparatorPrimitive } from "radix-ui"
 
@@ -15,7 +17,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className
       )}
       {...props}

resources/js/pages/admin/manage/transaction/create.tsx

@@ -1,8 +1,5 @@
 'use no memo';
 
-import { Form, Head, Link, usePage } from '@inertiajs/react';
-import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
 import { FileUpload } from '@/components/file-upload';
 import { ImagePreviewModal } from '@/components/image-preview-modal';
@@ -42,8 +39,12 @@ import { formatNumber } from '@/lib/format';
 import { loadTransactionDraft } from '@/lib/transaction-draft';
 import { getTemporaryUrl } from '@/lib/upload';
 import { formatCurrency } from '@/lib/utils';
-import { index as transactionIndex, store } from '@/routes/admin/manage/transactions';
+import { store, index as transactionIndex } from '@/routes/admin/manage/transactions';
+import { Form, Head, Link, usePage } from '@inertiajs/react';
+import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { ProductForTransaction, TransactionCreateData } from './columns';
+import { FieldDescription } from '@/components/ui/field';
 
 type CartLine = {
     key: string;
@@ -437,8 +438,8 @@ export default function TransactionCreate({ data }: Props) {
                                                                         disabled={
                                                                             !(
                                                                                 quantities[
-                                                                                    variant
+                                                                                variant
-                                                                                        .id
+                                                                                    .id
                                                                                 ] ??
                                                                                 0
                                                                             )
@@ -456,8 +457,8 @@ export default function TransactionCreate({ data }: Props) {
                                                                         className="w-24 text-center"
                                                                         value={
                                                                             quantities[
-                                                                                variant
+                                                                            variant
-                                                                                    .id
+                                                                                .id
                                                                             ] ??
                                                                             0
                                                                         }
@@ -507,7 +508,7 @@ export default function TransactionCreate({ data }: Props) {
                                                 onValueChange={(value) =>
                                                     setStockType(
                                                         value as
-                                                            'good' | 'reject',
+                                                        'good' | 'reject',
                                                     )
                                                 }
                                                 className="flex flex-wrap gap-4"
@@ -673,8 +674,8 @@ export default function TransactionCreate({ data }: Props) {
                                                         setPhotoUrl(
                                                             key
                                                                 ? getTemporaryUrl(
-                                                                      key,
+                                                                    key,
-                                                                  )
+                                                                )
                                                                 : null,
                                                         );
                                                     }}
@@ -797,6 +798,9 @@ export default function TransactionCreate({ data }: Props) {
                                                     }
                                                     placeholder="0"
                                                 />
+                                                <FieldDescription>
+                                                    Jika diisi, harga nego menjadi total akhir.
+                                                </FieldDescription>
                                                 <InputError
                                                     message={errors.nego_price}
                                                 />

resources/js/pages/admin/manage/transaction/edit.tsx

@@ -1,8 +1,5 @@
 'use no memo';
 
-import { Form, Head, Link } from '@inertiajs/react';
-import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
 import { FileUpload } from '@/components/file-upload';
 import { ImagePreviewModal } from '@/components/image-preview-modal';
@@ -41,7 +38,11 @@ import { formatNumber } from '@/lib/format';
 import { getTemporaryUrl } from '@/lib/upload';
 import { formatCurrency } from '@/lib/utils';
 import { index as transactionIndex, update } from '@/routes/admin/manage/transactions';
-import type { TransactionCreateData, TransactionForEdit, OptionItem } from './columns';
+import { FieldDescription } from '@base-ui/react';
+import { Form, Head, Link } from '@inertiajs/react';
+import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { TransactionCreateData, TransactionForEdit } from './columns';
 
 type CartLine = {
     key: string;
@@ -368,8 +369,8 @@ export default function TransactionEdit({ transaction, data }: Props) {
                                                                         disabled={
                                                                             !(
                                                                                 quantities[
-                                                                                    variant
+                                                                                variant
-                                                                                        .id
+                                                                                    .id
                                                                                 ] ??
                                                                                 0
                                                                             )
@@ -387,8 +388,8 @@ export default function TransactionEdit({ transaction, data }: Props) {
                                                                         className="w-24 text-center"
                                                                         value={
                                                                             quantities[
-                                                                                variant
+                                                                            variant
-                                                                                    .id
+                                                                                .id
                                                                             ] ??
                                                                             0
                                                                         }
@@ -443,7 +444,7 @@ export default function TransactionEdit({ transaction, data }: Props) {
                                                 onValueChange={(value) =>
                                                     setStockType(
                                                         value as
-                                                            'good' | 'reject',
+                                                        'good' | 'reject',
                                                     )
                                                 }
                                                 className="flex flex-wrap gap-4"
@@ -609,8 +610,8 @@ export default function TransactionEdit({ transaction, data }: Props) {
                                                         setPhotoUrl(
                                                             key
                                                                 ? getTemporaryUrl(
-                                                                      key,
+                                                                    key,
-                                                                  )
+                                                                )
                                                                 : null,
                                                         );
                                                     }}
@@ -733,6 +734,9 @@ export default function TransactionEdit({ transaction, data }: Props) {
                                                     }
                                                     placeholder="0"
                                                 />
+                                                <FieldDescription>
+                                                    Jika diisi, harga nego menjadi total akhir.
+                                                </FieldDescription>
                                                 <InputError
                                                     message={errors.nego_price}
                                                 />

routes/web.php

@@ -65,6 +65,7 @@
         Route::resource('cuttings', CuttingController::class)->except(['show'])->middleware('permission:cuttings.view|cuttings.create|cuttings.update|cuttings.delete');
 
         Route::resource('transactions', TransactionController::class)->except(['show'])->middleware('permission:orders.view|orders.create|orders.update|orders.delete');
+        Route::patch('transactions/{transaction}/status', [TransactionController::class, 'updateStatus'])->name('transactions.updateStatus')->middleware('permission:orders.update');
 
         Route::resource('restocks', RestockController::class)->except(['show'])->middleware('permission:restocks.view|restocks.create|restocks.update|restocks.delete');
     });