accounting table changes

Parts/Input.js

@@ -17,11 +17,12 @@ export function useField(props){
 
 export default function Input({ label, title, className, children, ...props }) {
   /*name, id*/
+  props.id = props.id ?? props.name ?? title;
 
   const [field, meta, helpers] = useField(props);
 
   return (
-    <div css={[title && tw`my-1`]} className={className}>
+    <div css={[title && tw`my-1`, tw`relative`]} className={className}>
       {title && (
         <label
           {...label}
@@ -33,8 +34,8 @@ export default function Input({ label, title, className, children, ...props }) {
       )}
       {/*name={name || title} id={id || name || title}*/}
       <input
-        {...field}
         {...props}
+        {...field}
         tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "
       />
       {children}
@@ -77,7 +78,17 @@ export function TextArea({
     </div>
   );
 }
-
+/**
+ * Renders a checkbox input with optional label and error message.
+ *
+ * @param {Object} props - The properties for the CheckBox component.
+ * @param {string} props.label - The label for the checkbox.
+ * @param {string} props.title - The title for the checkbox.
+ * @param {string} props.className - The class name for the container div.
+ * @param {ReactNode} props.children - The children components.
+ * @param {Object} props... - Additional properties for the checkbox input.
+ * @return {ReactElement} The rendered CheckBox component.
+ */
 export function CheckBox({
   label,
   title,
@@ -91,6 +102,7 @@ export function CheckBox({
   return (
     <div tw="my-1 flex text-secondary" className={className}>
       <input
+        checked={field.value}
         {...props}
         {...field}
         type="checkbox"
@@ -105,6 +117,9 @@ export function CheckBox({
         </label>
       ) : null}
       {children}
+      {meta?.touched && meta.error ? (
+        <div tw="text-[#c23c3c]">{meta.error}</div>
+      ) : null}
     </div>
   );
 }

Parts/Table.js

@@ -11,15 +11,18 @@ export function Table(props) {
 }
 
 
-const TablePart = styled.td(tw`border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4`)
+const TablePart = styled.td(tw`border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs p-4`)
 export {TablePart}
 
-const TableHeader = styled.th(tw`px-6 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left text-secondary border-b-2 border-secondary`)
+const TableRow = styled.tr(tw`odd:bg-black/10 hover:bg-black/15`)
+export {TableRow}
+
+const TableHeader = styled.th(tw`px-6 py-3 align-middle text-xs uppercase  font-bold text-left text-secondary border-b-2 border-secondary`)
 export {TableHeader}
 
 const TableNote = styled.p(tw`text-xs font-normal italic normal-case`)
 export {TableNote}
 
-const TableSidePart = styled.td(tw`border-t-0 px-8 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 pl-6 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left w-1/3 text-secondary border-r-2 border-secondary`)
+const TableSidePart = styled.td(tw`border-t-0 px-8 align-middle border-l-0 border-r-0 text-xs  p-4 pl-6 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left w-1/3 text-secondary border-r-2 border-secondary`)
 export {TableSidePart}