danships · danships · Nov 5, 2025 · Jan 15, 2026
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@tabler/icons-react": "^3.35.0",
     "axios": "^1.12.2",
     "better-auth": "^1.3.28",
+    "dayjs": "^1.11.19",
     "dotenv": "^17.2.3",
     "envalid": "^8.1.0",
     "mysql2": "^3.15.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/atoms/editable-date-cell.tsx b/src/components/atoms/editable-date-cell.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import dayjs from 'dayjs';
+
+type EditableDateCellProperties = {
+  value: string | null | undefined;
+  onBlur: (value: string) => void;
+  disabled?: boolean;
+  options?: {
+    dateFormat?: string;
+    includeTime?: boolean;
+  };
+};
+
+export function EditableDateCell({ value, onBlur, disabled = false, options }: EditableDateCellProperties) {
+  const includeTime = options?.includeTime ?? false;
+
+  // Convert ISO string to format expected by native inputs
+  const getInputValue = () => {
+    if (!value) return '';
+    const parsed = dayjs(value);
+    if (!parsed.isValid()) return '';
+
+    if (includeTime) {
+      // datetime-local expects "YYYY-MM-DDTHH:mm"
+      return parsed.format('YYYY-MM-DDTHH:mm');
+    }
+    // date input expects "YYYY-MM-DD"
+    return parsed.format('YYYY-MM-DD');
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+
+    if (!newValue) {
+      onBlur('');
+      return;
+    }
+
+    const parsedDate = dayjs(newValue);
+    if (!parsedDate.isValid()) {
+      onBlur(newValue);
+      return;
+    }
+
+    // Convert to appropriate format
+    if (includeTime) {
+      onBlur(parsedDate.toISOString());
+    } else {
+      onBlur(parsedDate.format('YYYY-MM-DD'));
+    }
+  };
+
+  return (
+    <input
+      type={includeTime ? 'datetime-local' : 'date'}
+      value={getInputValue()}
+      onChange={handleChange}
+      disabled={disabled}
+      style={{
+        minWidth: 120,
+        padding: '4px 8px',
+        border: 'none',
+        background: 'transparent',
+        outline: 'none',
+        fontSize: 'inherit',
+        fontFamily: 'inherit',
+      }}
+    />
+  );
+}
diff --git a/src/components/molecules/column-form-modal.tsx b/src/components/molecules/column-form-modal.tsx
@@ -1,12 +1,15 @@
-import { Button, Group, Modal, Select, Stack, TextInput } from '@mantine/core';
+import { Button, Checkbox, Group, Modal, Select, Stack, Text, TextInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useEffect } from 'react';
 import type { Column } from '@/types/schemas/entities/container';
 
-type ColumnFormValues = {
-  name: string;
-  type: 'string' | 'number' | 'boolean';
-};
+const ALLOWED_TYPES = ['string', 'number', 'boolean', 'date'] as const;
+
+type ColumnFormValues =
+  | { name: string; type: 'string' }
+  | { name: string; type: 'number' }
+  | { name: string; type: 'boolean' }
+  | { name: string; type: 'date'; options?: { dateFormat?: string; includeTime?: boolean } };
 
 type ColumnFormModalProperties = {
   opened: boolean;
@@ -31,17 +34,27 @@ export function ColumnFormModal({
     initialValues: {
       name: initialValues?.name ?? '',
       type: initialValues?.type ?? 'string',
+      ...(initialValues?.type === 'date' && initialValues.options
+        ? {
+            options: {
+              ...(initialValues.options.dateFormat ? { dateFormat: initialValues.options.dateFormat } : {}),
+              ...(initialValues.options.includeTime === undefined
+                ? {}
+                : { includeTime: initialValues.options.includeTime }),
+            },
+          }
+        : {}),
     },
     validate: {
       name: (value) => (value.trim() ? null : 'Column name is required'),
-      type: (value) => {
+      type: (value: 'string' | 'number' | 'boolean' | 'date') => {
         if (!value) {
           return 'Column type is required';
         }
         // TODO move this to a separate enum in the schema definition
-        const allowedTypes: ('string' | 'number' | 'boolean')[] = ['string', 'number', 'boolean'];
-        if (!allowedTypes.includes(value)) {
-          return 'Column type must be one of: string, number, boolean';
+
+        if (!ALLOWED_TYPES.includes(value)) {
+          return 'Column type must be one of: string, number, boolean, date';
         }
         return null;
       },
@@ -53,6 +66,16 @@ export function ColumnFormModal({
       form.setValues({
         name: initialValues?.name ?? '',
         type: initialValues?.type ?? 'string',
+        ...(initialValues?.type === 'date' && initialValues.options
+          ? {
+              options: {
+                ...(initialValues.options.dateFormat ? { dateFormat: initialValues.options.dateFormat } : {}),
+                ...(initialValues.options.includeTime === undefined
+                  ? {}
+                  : { includeTime: initialValues.options.includeTime }),
+              },
+            }
+          : {}),
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -65,7 +88,21 @@ export function ColumnFormModal({
 
   const handleSubmit = async (values: ColumnFormValues) => {
     try {
-      await onSubmit(values);
+      // Only include options for date type, and only if there are values
+      const submitValues: ColumnFormValues = {
+        ...values,
+        ...(values.type === 'date' &&
+        values.options &&
+        (values.options.dateFormat || values.options.includeTime !== undefined)
+          ? {
+              options: {
+                ...(values.options.dateFormat ? { dateFormat: values.options.dateFormat } : {}),
+                ...(values.options.includeTime === undefined ? {} : { includeTime: values.options.includeTime }),
+              },
+            }
+          : {}),
+      };
+      await onSubmit(submitValues);
       handleClose();
     } catch (error) {
       if (onError) {
@@ -85,10 +122,30 @@ export function ColumnFormModal({
               { value: 'string', label: 'Text' },
               { value: 'number', label: 'Number' },
               { value: 'boolean', label: 'Checkbox' },
+              { value: 'date', label: 'Date' },
             ]}
             {...form.getInputProps('type')}
             required
           />
+          {form.values.type === 'date' && (
+            <>
+              <TextInput
+                label="Date Format"
+                placeholder="e.g., MM/DD/YYYY, DD-MM-YYYY"
+                description={
+                  <Text>
+                    Format string using{' '}
+                    <a href="https://day.js.org/docs/en/display/format" target="_blank">
+                      dayjs tokens
+                    </a>{' '}
+                    (optional)
+                  </Text>
+                }
+                {...form.getInputProps('options.dateFormat')}
+              />
+              <Checkbox label="Include time" {...form.getInputProps('options.includeTime', { type: 'checkbox' })} />
+            </>
+          )}
           <Group justify="flex-end" mt="md">
             <Button variant="subtle" onClick={handleClose}>
               Cancel

diff --git a/src/components/molecules/data-table-row.tsx b/src/components/molecules/data-table-row.tsx
@@ -3,6 +3,7 @@ import { Table } from '@mantine/core';
 import { EditablePageNameCell } from '@/components/atoms/editable-page-name-cell';
 import { EditableTextCell } from '@/components/atoms/editable-text-cell';
 import { EditableBooleanCell } from '@/components/atoms/editable-boolean-cell';
+import { EditableDateCell } from '@/components/atoms/editable-date-cell';
 import type { Column } from '@/types/schemas/entities/container';
 import type { Page } from '@/types/api';
 import type { PageValue } from '@/types/schemas/entities/container';
@@ -49,6 +50,26 @@ export function DataTableRow({
           );
         }
 
+        if (col.type === 'date') {
+          const dateOptions =
+            col.options && (col.options.dateFormat || col.options.includeTime !== undefined)
+              ? {
+                  ...(col.options.dateFormat ? { dateFormat: col.options.dateFormat } : {}),
+                  ...(col.options.includeTime === undefined ? {} : { includeTime: col.options.includeTime }),
+                }
+              : undefined;
+          return (
+            <Table.Td key={col.id}>
+              <EditableDateCell
+                value={current?.type === 'date' ? current.value : null}
+                onBlur={(value) => onCellUpdate(col.id, { type: 'date', value })}
+                disabled={disabled}
+                {...(dateOptions ? { options: dateOptions } : {})}
+              />
+            </Table.Td>
+          );
+        }
+
         return (
           <Table.Td key={col.id}>
             <EditableTextCell

diff --git a/src/components/organisms/data-view-table.tsx b/src/components/organisms/data-view-table.tsx
@@ -60,8 +60,17 @@ export function DataViewTable({
   const { updatePage, inProgress: pageUpdateInProgress } = useUpdatePage({ mutatePages });
   const { showError } = useNotification();
 
-  const handleColumnSubmit = async (values: { name: string; type: 'string' | 'number' | 'boolean' }) => {
-    await (editingColumn ? updateColumn(editingColumn.id, values) : createColumn(values.name, values.type));
+  const handleColumnSubmit = async (values: {
+    name: string;
+    type: 'string' | 'number' | 'boolean' | 'date';
+    options?: {
+      dateFormat?: string;
+      includeTime?: boolean;
+    };
+  }) => {
+    await (editingColumn
+      ? updateColumn(editingColumn.id, values)
+      : createColumn(values.name, values.type, values.options));
     mutateDataSource();
   };
 

diff --git a/src/lib/hooks/api/use-create-data-source-column.ts b/src/lib/hooks/api/use-create-data-source-column.ts
@@ -10,13 +10,22 @@ export function useCreateDataSourceColumn(dataSourceId: string) {
   const { post, inProgress } = useCudApi();
 
   const createColumn = useCallback(
-    async (name: string, type: 'string' | 'number' | 'boolean'): Promise<CreateDataSourceColumnResponse | null> => {
+    async (
+      name: string,
+      type: 'string' | 'number' | 'boolean' | 'date',
+      options?: {
+        dateFormat?: string;
+        includeTime?: boolean;
+      }
+    ): Promise<CreateDataSourceColumnResponse | null> => {
+      const body: CreateDataSourceColumnBody = {
+        name: name.trim(),
+        type,
+        ...(options ? { options } : {}),
+      };
       return await post<CreateDataSourceColumnResponse, CreateDataSourceColumnBody>(
         CREATE_DATA_SOURCE_COLUMN_ENDPOINT.replace(':id', dataSourceId),
-        {
-          name: name.trim(),
-          type,
-        }
+        body
       );
     },
     [dataSourceId, post]

diff --git a/src/types/api/endpoints/create-data-source-column.ts b/src/types/api/endpoints/create-data-source-column.ts
@@ -4,10 +4,38 @@ import { columnSchema } from '../../schemas/entities/container';
 
 export const CREATE_DATA_SOURCE_COLUMN_ENDPOINT = '/data-sources/:id/columns';
 
-export const createDataSourceColumnBodySchema = z.object({
+const createStringColumnSchema = z.object({
   name: z.string().min(1),
-  type: z.union([z.literal('string'), z.literal('number'), z.literal('boolean')]),
+  type: z.literal('string'),
 });
+
+const createNumberColumnSchema = z.object({
+  name: z.string().min(1),
+  type: z.literal('number'),
+});
+
+const createBooleanColumnSchema = z.object({
+  name: z.string().min(1),
+  type: z.literal('boolean'),
+});
+
+const createDateColumnSchema = z.object({
+  name: z.string().min(1),
+  type: z.literal('date'),
+  options: z
+    .object({
+      dateFormat: z.string().optional(),
+      includeTime: z.boolean().optional(),
+    })
+    .optional(),
+});
+
+export const createDataSourceColumnBodySchema = z.discriminatedUnion('type', [
+  createStringColumnSchema,
+  createNumberColumnSchema,
+  createBooleanColumnSchema,
+  createDateColumnSchema,
+]);
 export type CreateDataSourceColumnBody = z.infer<typeof createDataSourceColumnBodySchema>;
 
 export const createDataSourceColumnResponseSchema = columnSchema;