Improve table layout, html editors

Author: teimurjan

workspaces/resume-generator/app/generate/page.tsx

@@ -1,6 +1,5 @@
 import { GenerateApplicationForm } from '@/components/widgets/generate-application-form/generate-application-form'
 import { RecentJobApplications } from '@/components/widgets/recent-job-applications/recent-job-applications'
-import { Separator } from '@/components/ui/separator'
 import gqlClient from '@/gql-client'
 
 const Generate = async () => {
@@ -13,8 +12,6 @@ const Generate = async () => {
           resume: data,
         }}
       />
-      <Separator />
-      <h4>Recent job applications</h4>
       <RecentJobApplications className="flex-1" />
     </div>
   )

workspaces/resume-generator/components/common/html-editor.tsx

@@ -0,0 +1,16 @@
+import Editor from 'react-simple-wysiwyg'
+
+interface Props {
+  onChange?: (content: string) => void
+  value?: string
+}
+
+export const HtmlEditor = ({ onChange, value }: Props) => {
+  return (
+    <Editor
+      className="[&_ul]:list-disc [&_ul]:ml-5 [&_ol]:list-decimal [&_ol]:ml-5"
+      value={value}
+      onChange={(e) => onChange?.(e.target.value)}
+    />
+  )
+}

workspaces/resume-generator/components/ui/badge.tsx

@@ -15,6 +15,10 @@ const badgeVariants = cva(
           "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
           "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        success:
+          "border-transparent bg-green-700 text-white [a&]:hover:bg-green-700/90",
+        danger:
+          "border-transparent bg-yellow-600 text-white [a&]:hover:bg-yellow-600/90",
         outline:
           "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },

workspaces/resume-generator/components/ui/data-table.tsx

@@ -1,13 +1,13 @@
 'use client'
 
 import {
-  ColumnDef,
   Row,
   Table,
   flexRender,
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
+  TableOptions,
 } from '@tanstack/react-table'
 
 import { TableCell, TableHead, TableRow } from '@/components/ui/table'
@@ -46,29 +46,34 @@ const TableRowComponent = <TData,>(rows: Row<TData>[]) =>
         {...props}
       >
         {row.getVisibleCells().map((cell) => (
-          <TableCell key={cell.id}>
+          <TableCell
+            key={cell.id}
+            style={{
+              width: cell.column.getSize(),
+            }}
+          >
             {flexRender(cell.column.columnDef.cell, cell.getContext())}
           </TableCell>
         ))}
       </TableRow>
     )
   }
 
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
+interface DataTableProps<TData> {
+  columns: TableOptions<TData>['columns']
   data: TData[]
   height: number
   header?:
     | React.ReactNode
     | (({ table }: { table: Table<TData> }) => React.ReactNode)
 }
 
-export function DataTable<TData, TValue>({
+export function DataTable<TData>({
   columns,
   data,
   height,
   header,
-}: DataTableProps<TData, TValue>) {
+}: DataTableProps<TData>) {
   const table = useReactTable({
     data,
     columns,
@@ -99,15 +104,15 @@ export function DataTable<TData, TValue>({
               >
                 <div
                   className="flex items-center"
-                  {...{
-                    style: header.column.getCanSort()
+                  style={
+                    header.column.getCanSort()
                       ? {
                           cursor: 'pointer',
                           userSelect: 'none',
                         }
-                      : {},
-                    onClick: header.column.getToggleSortingHandler(),
-                  }}
+                      : undefined
+                  }
+                  onClick={header.column.getToggleSortingHandler()}
                 >
                   {flexRender(
                     header.column.columnDef.header,

workspaces/resume-generator/components/widgets/adjust-resume-subform/adjust-resume-subform.tsx

@@ -19,6 +19,14 @@ import { Label } from '../../ui/label'
 import { Combobox, ComboboxOption } from '../../ui/combobox'
 import { z } from 'zod'
 import { adjustFormSchema } from '@/schema/adjust-form'
+import dynamic from 'next/dynamic'
+
+const HtmlEditor = dynamic(
+  () => import('../../common/html-editor').then((mod) => mod.HtmlEditor),
+  {
+    ssr: false,
+  },
+)
 
 type FormValues = z.infer<typeof adjustFormSchema>
 
@@ -447,9 +455,12 @@ export const AdjustResumeSubform = ({ form }: Props) => {
                 name={`resume.experiences.${index}.description.html`}
                 render={({ field }) => (
                   <FormItem className="md:col-span-2">
-                    <FormLabel>Description (HTML)</FormLabel>
+                    <FormLabel>Description</FormLabel>
                     <FormControl>
-                      <Textarea {...field} rows={4} />
+                      <HtmlEditor
+                        value={field.value ?? ''}
+                        onChange={(content) => field.onChange(content)}
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>

workspaces/resume-generator/components/widgets/job-applications-table/job-applications-table.tsx

@@ -1,9 +1,8 @@
 'use client'
 import { JobApplication } from '@/db/types'
 import { Button } from '../../ui/button'
-import { useRouter } from '@bprogress/next/app'
-import { ExternalLink, Loader2 } from 'lucide-react'
-import { useMemo, useState } from 'react'
+import { Loader2 } from 'lucide-react'
+import { useState } from 'react'
 import {
   AlertDialog,
   AlertDialogContent,
@@ -19,10 +18,10 @@ import { Input } from '../../ui/input'
 import { useSearch } from '@/hooks/use-search'
 import { JobApplicationsTableSkeleton } from './job-applications-table-skeleton'
 import { DataTable } from '../../ui/data-table'
-import { ColumnDef } from '@tanstack/react-table'
-import { Badge } from '../../ui/badge'
 import { cn } from '@/lib/utils'
-import { Checkbox } from '@/components/ui/checkbox'
+import { useJobApplicationsTableColumns } from './use-job-applications-table-columns'
+import { Table } from '@tanstack/react-table'
+
 interface Props {
   jobApplications: JobApplication[]
   className?: string
@@ -46,121 +45,51 @@ export const JobApplicationsTable = ({
   })
   const [containerHeight, setContainerHeight] = useState<number>(600)
 
-  const router = useRouter()
   const { mutateAsync: removeJobApplications, isPending: isRemoving } =
     useRemoveJobApplications()
 
   const [removingIds, setRemovingIds] = useState<string[]>([])
 
-  const columns: ColumnDef<JobApplication>[] = useMemo(() => {
-    const selectColumn: ColumnDef<JobApplication> = {
-      id: 'select',
-      header: ({ table }) => (
-        <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && 'indeterminate')
-          }
-          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        />
-      ),
-      cell: ({ row }) => (
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-        />
-      ),
-      enableSorting: false,
-      enableHiding: false,
-      footer: footer
-        ? ({ table }) => (
-            <div>
-              Selected {table.getFilteredSelectedRowModel().rows.length} of{' '}
-              {jobApplications.length} applications
-            </div>
-          )
-        : undefined,
-    }
-
-    const columns_: ColumnDef<JobApplication>[] = [
-      {
-        header: 'Company',
-        cell: ({ row }) => (
-          <div className="truncate w-40">
-            {row.original.companyName ?? 'N/A'}
-          </div>
-        ),
-      },
-      {
-        header: 'Job Title',
-        cell: ({ row }) => (
-          <div className="truncate w-60">{row.original.jobTitle ?? 'N/A'}</div>
-        ),
-      },
-      {
-        header: 'Job Description',
-        cell: ({ row }) => (
-          <div className="truncate w-[500px]">
-            {row.original.jobDescription}
-          </div>
-        ),
-        id: 'jobDescription',
-      },
-      {
-        accessorFn: (row) =>
-          new Intl.DateTimeFormat('en-US').format(
-            new Date(row.createdAt.toMillis()),
-          ),
-        header: 'Created At',
-      },
-      {
-        cell: ({ row }) => {
-          const status = (() => {
-            if (!row.original.status) {
-              return row.original.resume ? 'Completed' : 'Pending'
-            }
-            return (
-              row.original.status.slice(0, 1).toUpperCase() +
-              row.original.status.slice(1)
-            )
-          })()
-          return (
-            <Badge variant={status === 'Completed' ? 'default' : 'secondary'}>
-              {status}
-            </Badge>
-          )
-        },
-        header: 'Status',
-      },
-      {
-        id: 'actions',
-        cell: ({ row }) => {
-          const jobApplication = row.original
-          return (
-            <div className="text-right">
-              <Button
-                onClick={(e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-
-                  router.push(`/adjust/${jobApplication.id}`)
-                }}
-                variant="outline"
-              >
-                <ExternalLink />
-              </Button>
-            </div>
-          )
-        },
-      },
-    ]
+  const columns = useJobApplicationsTableColumns({
+    jobApplications,
+    footer,
+    selectable,
+  })
 
-    if (selectable) {
-      return [selectColumn, ...columns_]
+  const renderHeader = ({ table }: { table: Table<JobApplication> }) => {
+    if (!search) {
+      return null
     }
 
-    return columns_
-  }, [footer, jobApplications.length, router, selectable])
+    const selectedRows = table.getFilteredSelectedRowModel().rows
+    return (
+      <div className="flex items-center justify-between gap-2 h-16">
+        <Input
+          className="w-96 max-w-full"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search by job title, company name, or description..."
+        />
+        <Button
+          className={cn(
+            selectedRows.length === 0 ? 'opacity-0!' : 'opacity-100',
+            'transition-opacity duration-300',
+          )}
+          variant="destructive"
+          disabled={selectedRows.length === 0}
+          onClick={() => {
+            setRemovingIds(
+              selectedRows
+                .map((row) => row.original.id)
+                .filter((id) => id !== undefined),
+            )
+          }}
+        >
+          Delete
+        </Button>
+      </div>
+    )
+  }
 
   if (loading) {
     return <JobApplicationsTableSkeleton />
@@ -180,36 +109,7 @@ export const JobApplicationsTable = ({
           columns={columns}
           data={searchResults}
           height={containerHeight}
-          header={({ table }) => {
-            const selectedRows = table.getFilteredSelectedRowModel().rows
-            return search ? (
-              <div className="flex items-center justify-between gap-2 h-16">
-                <Input
-                  className="w-96 max-w-full"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  placeholder="Search by job title, company name, or description..."
-                />
-                <Button
-                  className={cn(
-                    selectedRows.length === 0 ? 'opacity-0!' : 'opacity-100',
-                    'transition-opacity duration-300',
-                  )}
-                  variant="destructive"
-                  disabled={selectedRows.length === 0}
-                  onClick={() => {
-                    setRemovingIds(
-                      selectedRows
-                        .map((row) => row.original.id)
-                        .filter((id) => id !== undefined),
-                    )
-                  }}
-                >
-                  Delete
-                </Button>
-              </div>
-            ) : null
-          }}
+          header={renderHeader}
         />
 
         <AlertDialog