Initial commit

src/components/users/user-form-dialog.tsx

@@ -0,0 +1,188 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { User } from "@/types"
+
+const userFormSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  email: z.string().email("Invalid email address"),
+  role: z.string().min(1, "Role is required"),
+  active: z.boolean(),
+})
+
+type UserFormValues = z.infer<typeof userFormSchema>
+
+interface UserFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  user?: User | null
+}
+
+export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps) {
+  const isEditing = !!user
+
+  const form = useForm<UserFormValues>({
+    resolver: zodResolver(userFormSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      role: "sales",
+      active: true,
+    },
+  })
+
+  useEffect(() => {
+    if (user) {
+      form.reset({
+        name: user.name,
+        email: user.email,
+        role: user.role,
+        active: user.active,
+      })
+    } else {
+      form.reset({ name: "", email: "", role: "sales", active: true })
+    }
+  }, [user, form])
+
+  function onSubmit(values: UserFormValues) {
+    console.log(values)
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[450px]">
+        <DialogHeader>
+          <DialogTitle>{isEditing ? "Edit User" : "Add New User"}</DialogTitle>
+          <DialogDescription>
+            {isEditing
+              ? "Update the user's information and permissions."
+              : "Create a new user account."}
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="John Doe" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input placeholder="john@coastalit.com" type="email" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="role"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Role</FormLabel>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select role" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="admin">Admin</SelectItem>
+                      <SelectItem value="sales">Sales</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {!isEditing && (
+              <FormField
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Password</FormLabel>
+                    <FormControl>
+                      <Input type="password" placeholder="Enter password" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+            <FormField
+              control={form.control}
+              name="active"
+              render={({ field }) => (
+                <FormItem className="flex items-center justify-between rounded-lg border p-3">
+                  <div className="space-y-0.5">
+                    <FormLabel>Active</FormLabel>
+                    <p className="text-sm text-muted-foreground">
+                      User can access the system
+                    </p>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button type="submit">
+                {isEditing ? "Save Changes" : "Create User"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/users/user-status-badge.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+interface UserStatusBadgeProps {
+  active: boolean
+}
+
+export function UserStatusBadge({ active }: UserStatusBadgeProps) {
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        active
+          ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
+          : "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20"
+      )}
+    >
+      <span className={cn("mr-1.5 h-1.5 w-1.5 rounded-full", {
+        "bg-emerald-500": active,
+        "bg-zinc-500": !active,
+      })} />
+      {active ? "Active" : "Inactive"}
+    </Badge>
+  )
+}

src/components/users/users-table.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { ColumnDef } from "@tanstack/react-table"
+import { DataTable } from "@/components/shared/data-table"
+import { DataTableColumnHeader } from "@/components/shared/data-table-column-header"
+import { UserStatusBadge } from "./user-status-badge"
+import { UserFormDialog } from "./user-form-dialog"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { User } from "@/types"
+import { Pencil, Power, PowerOff } from "lucide-react"
+
+interface UsersTableProps {
+  data: User[]
+  loading?: boolean
+}
+
+export function UsersTable({ data, loading }: UsersTableProps) {
+  const [editingUser, setEditingUser] = useState<User | null>(null)
+  const [editOpen, setEditOpen] = useState(false)
+
+  const columns: ColumnDef<User>[] = useMemo(
+    () => [
+      {
+        id: "select",
+        header: ({ table }) => (
+          <Checkbox
+            checked={table.getIsAllPageRowsSelected()}
+            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+            aria-label="Select all"
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+          />
+        ),
+        enableSorting: false,
+      },
+      {
+        accessorKey: "name",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Name" />
+        ),
+        cell: ({ row }) => (
+          <div className="flex items-center gap-3">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src={row.original.avatar} />
+              <AvatarFallback>{row.original.name[0]}</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="font-medium">{row.original.name}</p>
+              <p className="text-xs text-muted-foreground">{row.original.email}</p>
+            </div>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "email",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Email" />
+        ),
+        cell: ({ row }) => (
+          <span className="text-muted-foreground">{row.getValue("email")}</span>
+        ),
+      },
+      {
+        accessorKey: "role",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Role" />
+        ),
+        cell: ({ row }) => {
+          const role = row.getValue("role") as string
+          return (
+            <Badge
+              variant="outline"
+              className={role === "admin"
+                ? "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20 capitalize"
+                : "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20 capitalize"
+              }
+            >
+              {role}
+            </Badge>
+          )
+        },
+      },
+      {
+        accessorKey: "active",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Status" />
+        ),
+        cell: ({ row }) => <UserStatusBadge active={row.getValue("active")} />,
+      },
+      {
+        id: "actions",
+        cell: ({ row }) => {
+          const user = row.original
+          return (
+            <div className="flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => {
+                  setEditingUser(user)
+                  setEditOpen(true)
+                }}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-muted-foreground hover:text-destructive"
+              >
+                {user.active ? <PowerOff className="h-4 w-4" /> : <Power className="h-4 w-4" />}
+              </Button>
+            </div>
+          )
+        },
+      },
+    ],
+    []
+  )
+
+  return (
+    <>
+      <DataTable
+        columns={columns}
+        data={data}
+        loading={loading}
+        emptyMessage="No users found."
+      />
+      <UserFormDialog
+        open={editOpen}
+        onOpenChange={setEditOpen}
+        user={editingUser}
+      />
+    </>
+  )
+}