feat: premium makeover with dark glassmorphic UI

Author: Shegxy69

webapp/prisma/schema.prisma

@@ -25,12 +25,22 @@ enum TodoItemStatus {
   COMPLETED
 }
 
+enum TodoItemPriority {
+  LOW
+  MEDIUM
+  HIGH
+  URGENT
+}
+
 model TodoItem {
-  id          String         @id @default(uuid())
+  id          String           @id @default(uuid())
   title       String
-  description String         @db.Text()
+  description String           @db.Text()
   userId      String
   status      TodoItemStatus
+  priority    TodoItemPriority @default(MEDIUM)
+  dueDate     DateTime?
+  category    String?
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt

webapp/src/app/(root)/actions.ts

@@ -10,11 +10,11 @@ import {
 } from './schemas';
 import { prisma } from '@/lib/prisma';
 import { revalidatePath } from 'next/cache';
-import { TodoItemStatus } from '@prisma/client';
+import { TodoItemStatus, TodoItemPriority } from '@prisma/client';
 import { runJob } from '@/lib/jobs';
 
 export const createTodo = authActionClient.schema(createTodoSchema).action(async ({ parsedInput, ctx }) => {
-  const { title, description } = parsedInput;
+  const { title, description, priority, dueDate, category } = parsedInput;
   const { userId } = ctx;
 
   const todo = await prisma.todoItem.create({
@@ -23,6 +23,9 @@ export const createTodo = authActionClient.schema(createTodoSchema).action(async
       description,
       userId,
       status: TodoItemStatus.PENDING,
+      priority: (priority as TodoItemPriority) || TodoItemPriority.MEDIUM,
+      dueDate: dueDate ? new Date(dueDate) : null,
+      category: category || null,
     },
   });
 
@@ -31,7 +34,7 @@ export const createTodo = authActionClient.schema(createTodoSchema).action(async
 });
 
 export const updateTodo = authActionClient.schema(updateTodoSchema).action(async ({ parsedInput, ctx }) => {
-  const { id, title, description, status } = parsedInput;
+  const { id, title, description, status, priority, dueDate, category } = parsedInput;
   const { userId } = ctx;
 
   const todo = await prisma.todoItem.update({
@@ -43,6 +46,9 @@ export const updateTodo = authActionClient.schema(updateTodoSchema).action(async
       title,
       description,
       status,
+      ...(priority && { priority: priority as TodoItemPriority }),
+      ...(dueDate !== undefined && { dueDate: dueDate ? new Date(dueDate) : null }),
+      ...(category !== undefined && { category: category || null }),
     },
   });
 

webapp/src/app/(root)/components/CreateTodoForm.tsx

@@ -8,6 +8,7 @@ import { createTodoSchema } from '../schemas';
 import { toast } from 'sonner';
 import { useEventBus } from '@/hooks/use-event-bus';
 import { useRouter } from 'next/navigation';
+import { Plus, X, Sparkles, ArrowDown, Minus, AlertTriangle, Flame } from 'lucide-react';
 
 export default function CreateTodoForm(props: { userId: string }) {
   const [isFormOpen, setIsFormOpen] = useState(false);
@@ -22,88 +23,170 @@ export default function CreateTodoForm(props: { userId: string }) {
   });
 
   const {
-    form: { register, formState, reset },
+    form: { register, formState, reset, setValue, watch },
     action,
     handleSubmitWithAction,
   } = useHookFormAction(createTodo, zodResolver(createTodoSchema), {
     actionProps: {
       onSuccess: () => {
-        toast.success('Todo created successfully');
+        toast.success('Task created successfully');
         reset();
         setIsFormOpen(false);
       },
       onError: ({ error }) => {
-        toast.error(typeof error === 'string' ? error : 'Failed to create todo');
+        toast.error(typeof error === 'string' ? error : 'Failed to create task');
       },
     },
     formProps: {
       defaultValues: {
         title: '',
         description: '',
+        priority: 'MEDIUM',
+        dueDate: '',
+        category: '',
       },
     },
   });
 
+  const selectedPriority = watch('priority');
+
+  const priorities = [
+    { value: 'LOW', label: 'Low', icon: ArrowDown, color: 'text-emerald-400', bg: 'bg-emerald-500/10', border: 'border-emerald-500/30', activeBg: 'bg-emerald-500/20' },
+    { value: 'MEDIUM', label: 'Med', icon: Minus, color: 'text-amber-400', bg: 'bg-amber-500/10', border: 'border-amber-500/30', activeBg: 'bg-amber-500/20' },
+    { value: 'HIGH', label: 'High', icon: AlertTriangle, color: 'text-orange-400', bg: 'bg-orange-500/10', border: 'border-orange-500/30', activeBg: 'bg-orange-500/20' },
+    { value: 'URGENT', label: 'Urgent', icon: Flame, color: 'text-red-400', bg: 'bg-red-500/10', border: 'border-red-500/30', activeBg: 'bg-red-500/20' },
+  ];
+
   if (!isFormOpen) {
     return (
       <div className="mb-6">
         <button
           onClick={() => setIsFormOpen(true)}
-          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          className="group inline-flex items-center gap-2.5 btn-primary py-2.5 px-5 text-sm"
         >
-          + Add New Todo
+          <div className="w-5 h-5 rounded-md bg-white/20 flex items-center justify-center group-hover:bg-white/30 transition-colors">
+            <Plus className="w-3.5 h-3.5 text-white" />
+          </div>
+          Add New Task
         </button>
       </div>
     );
   }
 
   return (
-    <div className="bg-white shadow-md rounded-lg p-6 mb-6">
-      <h2 className="text-lg font-medium text-gray-900 mb-4">Create New Todo</h2>
+    <div className="glass-card rounded-xl p-6 mb-6 animate-scale-in">
+      <div className="flex items-center gap-2 mb-5">
+        <Sparkles className="w-5 h-5 text-violet-400" />
+        <h2 className="text-lg font-semibold text-zinc-200">Create New Task</h2>
+      </div>
+
       <form onSubmit={handleSubmitWithAction} className="space-y-4">
+        {/* Title */}
         <div>
-          <label htmlFor="title" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="title" className="form-label">
             Title
           </label>
           <input
             id="title"
             {...register('title')}
-            placeholder="Your TODO item title."
-            className="mt-1 p-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            placeholder="What needs to be done?"
+            className="w-full px-3.5 py-2.5 rounded-xl glass-input text-sm text-zinc-200 placeholder-zinc-600"
           />
-          {formState.errors.title && <p className="mt-1 text-sm text-red-600">{formState.errors.title.message}</p>}
+          {formState.errors.title && (
+            <p className="mt-1 text-xs text-red-400">{formState.errors.title.message}</p>
+          )}
         </div>
 
+        {/* Description */}
         <div>
-          <label htmlFor="description" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="description" className="form-label">
             Description
           </label>
           <textarea
             id="description"
             {...register('description')}
             rows={3}
-            placeholder="Describe your TODO item."
-            className="mt-1 p-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            placeholder="Add some details..."
+            className="w-full px-3.5 py-2.5 rounded-xl glass-input text-sm text-zinc-200 placeholder-zinc-600 resize-none"
           />
           {formState.errors.description && (
-            <p className="mt-1 text-sm text-red-600">{formState.errors.description.message}</p>
+            <p className="mt-1 text-xs text-red-400">{formState.errors.description.message}</p>
           )}
         </div>
 
-        <div className="flex justify-end space-x-2">
+        {/* Priority Selector */}
+        <div>
+          <label className="form-label">Priority</label>
+          <div className="flex gap-2">
+            {priorities.map((p) => {
+              const Icon = p.icon;
+              const isActive = selectedPriority === p.value;
+              return (
+                <button
+                  key={p.value}
+                  type="button"
+                  onClick={() => setValue('priority', p.value as 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT')}
+                  className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium border transition-all duration-200 ${
+                    isActive
+                      ? `${p.activeBg} ${p.color} ${p.border}`
+                      : 'bg-transparent text-zinc-500 border-white/[0.06] hover:border-white/[0.12]'
+                  }`}
+                >
+                  <Icon className="w-3.5 h-3.5" />
+                  {p.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Due Date & Category Row */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label htmlFor="dueDate" className="form-label">
+              Due Date
+            </label>
+            <input
+              id="dueDate"
+              type="date"
+              {...register('dueDate')}
+              className="w-full px-3.5 py-2.5 rounded-xl glass-input text-sm text-zinc-200 [color-scheme:dark]"
+            />
+          </div>
+          <div>
+            <label htmlFor="category" className="form-label">
+              Category
+            </label>
+            <input
+              id="category"
+              type="text"
+              {...register('category')}
+              placeholder="e.g. Work, Personal"
+              className="w-full px-3.5 py-2.5 rounded-xl glass-input text-sm text-zinc-200 placeholder-zinc-600"
+            />
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-2 pt-2">
           <button
             type="button"
-            onClick={() => setIsFormOpen(false)}
-            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-gray-700 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+            onClick={() => {
+              setIsFormOpen(false);
+              reset();
+            }}
+            className="btn-ghost inline-flex items-center gap-1.5"
           >
+            <X className="w-3.5 h-3.5" />
             Cancel
           </button>
           <button
             type="submit"
             disabled={action.isExecuting}
-            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            className="btn-primary inline-flex items-center gap-1.5"
           >
-            {action.isExecuting ? 'Creating...' : 'Create Todo'}
+            <Plus className="w-3.5 h-3.5" />
+            {action.isExecuting ? 'Creating...' : 'Create Task'}
           </button>
         </div>
       </form>

webapp/src/app/(root)/components/DashboardStats.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { ListChecks, Clock, CheckCircle2, AlertCircle } from 'lucide-react';
+
+interface DashboardStatsProps {
+  total: number;
+  pending: number;
+  completed: number;
+  overdue: number;
+}
+
+const stats = [
+  {
+    key: 'total',
+    label: 'Total Tasks',
+    icon: ListChecks,
+    colorClass: 'text-violet-400',
+    bgClass: 'bg-violet-500/10',
+    borderClass: 'border-violet-500/20',
+  },
+  {
+    key: 'pending',
+    label: 'Pending',
+    icon: Clock,
+    colorClass: 'text-amber-400',
+    bgClass: 'bg-amber-500/10',
+    borderClass: 'border-amber-500/20',
+  },
+  {
+    key: 'completed',
+    label: 'Completed',
+    icon: CheckCircle2,
+    colorClass: 'text-emerald-400',
+    bgClass: 'bg-emerald-500/10',
+    borderClass: 'border-emerald-500/20',
+  },
+  {
+    key: 'overdue',
+    label: 'Overdue',
+    icon: AlertCircle,
+    colorClass: 'text-rose-400',
+    bgClass: 'bg-rose-500/10',
+    borderClass: 'border-rose-500/20',
+  },
+] as const;
+
+export default function DashboardStats({ total, pending, completed, overdue }: DashboardStatsProps) {
+  const values = { total, pending, completed, overdue };
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-8">
+      {stats.map((stat, index) => {
+        const Icon = stat.icon;
+        return (
+          <div
+            key={stat.key}
+            className={`glass-card rounded-xl p-4 animate-fade-in-up stagger-${index + 1}`}
+            style={{ opacity: 0 }}
+          >
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-xs font-medium text-zinc-500 uppercase tracking-wider">
+                {stat.label}
+              </span>
+              <div className={`w-8 h-8 rounded-lg ${stat.bgClass} border ${stat.borderClass} flex items-center justify-center`}>
+                <Icon className={`w-4 h-4 ${stat.colorClass}`} />
+              </div>
+            </div>
+            <p className={`text-2xl font-bold ${stat.colorClass}`}>
+              {values[stat.key]}
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

webapp/src/app/(root)/components/EmptyState.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { type LucideIcon } from 'lucide-react';
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  subtitle?: string;
+  action?: React.ReactNode;
+}
+
+export default function EmptyState({ icon: Icon, title, subtitle, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 animate-fade-in-up">
+      <div className="w-16 h-16 rounded-2xl bg-white/[0.03] border border-white/[0.06] flex items-center justify-center mb-5">
+        <Icon className="w-7 h-7 text-zinc-600" />
+      </div>
+      <h3 className="text-lg font-semibold text-zinc-400 mb-1.5">{title}</h3>
+      {subtitle && (
+        <p className="text-sm text-zinc-600 text-center max-w-xs">{subtitle}</p>
+      )}
+      {action && <div className="mt-5">{action}</div>}
+    </div>
+  );
+}