frontend fully integreated with the backend

2026-08-25 23:47:33 +05:30
parent 1bee5f91c6
commit 83d3272784
151 changed files with 10724 additions and 573 deletions
@@ -0,0 +1,152 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useForm, zodResolver, z } from '@/lib/form'
+import { FormField } from '@/components/shared/form-field'
+import { Input } from '@/components/ui/input'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { FieldGroup } from '@/components/ui/field'
+import { toast } from '@/components/ui/toast'
+import { roles as rolesApi, getApiError } from '@/lib/api/index'
+import type { RoleResponse } from '@/types/api'
+
+const schema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  level: z.number().int().min(1, 'Level must be at least 1'),
+  isActive: z.boolean(),
+})
+
+type FormValues = z.infer<typeof schema>
+
+interface RoleSheetProps {
+  open: boolean
+  onClose: () => void
+  role: RoleResponse | null
+  onSuccess: () => void
+}
+
+export function RoleSheet({ open, onClose, role, onSuccess }: RoleSheetProps) {
+  const isEdit = !!role
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { name: '', level: 1, isActive: true },
+  })
+
+  useEffect(() => {
+    if (open) {
+      form.reset(
+        role
+          ? { name: role.name, level: role.level, isActive: role.isActive }
+          : { name: '', level: 1, isActive: true }
+      )
+    }
+  }, [open, role])
+
+  async function onSubmit(values: FormValues) {
+    try {
+      if (isEdit) {
+        await rolesApi.update(role!.id, values)
+        toast.add({ title: 'Role updated', type: 'success' })
+      } else {
+        await rolesApi.create(values)
+        toast.add({ title: 'Role created', type: 'success' })
+      }
+      onSuccess()
+      onClose()
+    } catch (err) {
+      toast.add({ title: 'Failed to save', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? 'Edit Role' : 'Add Role'}</DialogTitle>
+          <DialogDescription>
+            {isEdit ? 'Update the role details below.' : 'Add a new role to the system.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
+          <FieldGroup>
+            <FormField
+              control={form.control}
+              name="name"
+              label="Role Name"
+              required
+              render={({ field, invalid }) => (
+                <Input
+                  id="name"
+                  name={field.name}
+                  ref={field.ref}
+                  value={field.value as string}
+                  onChange={field.onChange}
+                  onBlur={field.onBlur}
+                  placeholder="e.g. Sales Manager"
+                  aria-invalid={invalid}
+                />
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="level"
+              label="Level"
+              required
+              render={({ field, invalid }) => (
+                <Input
+                  id="level"
+                  name={field.name}
+                  ref={field.ref}
+                  type="number"
+                  value={String(field.value as number)}
+                  onChange={(e) => field.onChange(parseInt(e.target.value) || 1)}
+                  onBlur={field.onBlur}
+                  placeholder="e.g. 1"
+                  aria-invalid={invalid}
+                />
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="isActive"
+              render={({ field }) => (
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="isActive"
+                    checked={field.value as boolean}
+                    onCheckedChange={field.onChange}
+                  />
+                  <label htmlFor="isActive" className="text-sm font-medium cursor-pointer">
+                    Active
+                  </label>
+                </div>
+              )}
+            />
+          </FieldGroup>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={form.formState.isSubmitting}>
+              {form.formState.isSubmitting ? 'Saving…' : isEdit ? 'Save Changes' : 'Create Role'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
@@ -0,0 +1,149 @@
+'use client'
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { Add01Icon } from '@hugeicons/core-free-icons'
+
+import { DataTable } from '@/components/shared/data-table'
+import type { TableConfig } from '@/components/shared/data-table'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/toast'
+import { roles as rolesApi, getApiError } from '@/lib/api/index'
+import type { RoleResponse } from '@/types/api'
+
+import { RoleSheet } from './role-sheet'
+
+export function RolesClient() {
+  const [data, setData] = useState<RoleResponse[]>([])
+  const [loading, setLoading] = useState(true)
+  const [total, setTotal] = useState(0)
+
+  const [sheetOpen, setSheetOpen] = useState(false)
+  const [editing, setEditing] = useState<RoleResponse | null>(null)
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await rolesApi.list()
+      setData(res)
+      setTotal(res.length)
+    } catch (err) {
+      toast.add({ title: 'Failed to load roles', description: getApiError(err), type: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  function openCreate() {
+    setEditing(null)
+    setSheetOpen(true)
+  }
+
+  function openEdit(role: RoleResponse) {
+    setEditing(role)
+    setSheetOpen(true)
+  }
+
+  async function toggleActive(role: RoleResponse) {
+    try {
+      await rolesApi.update(role.id, { isActive: !role.isActive })
+      toast.add({
+        title: role.isActive ? 'Role deactivated' : 'Role activated',
+        type: 'success',
+      })
+      fetchData()
+    } catch (err) {
+      toast.add({ title: 'Failed to update role', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  const tableConfig = useMemo<TableConfig<RoleResponse>>(() => ({
+    rowKey: 'id',
+    stickyHeader: true,
+    emptyMessage: 'No roles yet. Add one to get started.',
+    pagination: { enabled: true, pageSize: 20, pageSizeOptions: [10, 20, 50] },
+    columns: [
+      {
+        key: 'name',
+        title: 'Role',
+        fields: [{ key: 'name', primary: true }],
+        sortable: true,
+        minWidth: 200,
+      },
+      {
+        key: 'level',
+        title: 'Level',
+        fields: [{ key: 'level', transform: (v) => `Level ${v}` }],
+        width: 100,
+      },
+      {
+        key: 'status',
+        title: 'Status',
+        fields: ['isActive'],
+        width: 120,
+        cellRender: (row) => (
+          <Badge variant={row.isActive ? 'default' : 'secondary'}>
+            {row.isActive ? 'Active' : 'Inactive'}
+          </Badge>
+        ),
+      },
+    ],
+    rowActions: {
+      actions: () => [
+        {
+          action: 'edit',
+          label: 'Edit role',
+          onClick: openEdit,
+        },
+        {
+          action: 'deactivate',
+          label: 'Deactivate role',
+          onClick: toggleActive,
+          visible: (target) => target.isActive,
+        },
+        {
+          action: 'activate',
+          label: 'Activate role',
+          onClick: toggleActive,
+          visible: (target) => !target.isActive,
+        },
+      ],
+    },
+  }), [openEdit, toggleActive])
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Roles</h1>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            Permission sets that control what each role can see and do
+          </p>
+        </div>
+        <Button onClick={openCreate}>
+          <HugeiconsIcon icon={Add01Icon} size={16} />
+          Add Role
+        </Button>
+      </div>
+
+      <DataTable
+        config={tableConfig}
+        data={data}
+        loading={loading}
+        totalCount={total}
+      />
+
+      <RoleSheet
+        open={sheetOpen}
+        onClose={() => setSheetOpen(false)}
+        role={editing}
+        onSuccess={() => fetchData()}
+      />
+    </>
+  )
+}
@@ -0,0 +1,5 @@
+import { RolesClient } from './_components/roles-client'
+
+export default function RolesPage() {
+  return <RolesClient />
+}