Feature/groups

apps/console/src/app/(protected)/groups/all-groups/page.tsx

@@ -2,7 +2,11 @@ import React from 'react'
 import { PageHeading } from '@repo/ui/page-heading'
 
 const Page: React.FC = () => {
-  return <PageHeading eyebrow="Groups" heading="All Groups" />
+  return (
+    <>
+      <PageHeading eyebrow="Groups" heading="All Groups" />
+    </>
+  )
 }
 
 export default Page

apps/console/src/app/(protected)/groups/my-groups/create-group-dialog.tsx

@@ -0,0 +1,126 @@
+'use client'
+import React, { useState } from 'react'
+import { z } from 'zod'
+import { useForm } from 'react-hook-form'
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@repo/ui/dialog'
+import { Input } from '@repo/ui/input'
+import { Label } from '@repo/ui/label'
+import { Button } from '@repo/ui/button'
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@repo/ui/select'
+import { Textarea } from '@repo/ui/textarea'
+import { useToast } from '@repo/ui/use-toast'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { PlusCircle } from 'lucide-react'
+
+const CreateGroupSchema = z.object({
+  groupName: z.string().min(1, 'Group name is required'),
+  members: z.array(z.string()).min(1, 'At least one member must be selected'),
+  description: z.string().optional(),
+  tags: z.array(z.string()).optional(),
+  visibility: z.enum(['Public', 'Private']),
+})
+
+type CreateGroupFormData = z.infer<typeof CreateGroupSchema>
+
+type MyGroupsDialogProps = {
+  triggerText?: boolean
+}
+
+const CreateGroupDialog = ({ triggerText }: MyGroupsDialogProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [visibility, setVisibility] = useState<'Public' | 'Private'>('Private') // Local state for visibility
+  const { toast } = useToast()
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+    reset,
+  } = useForm<CreateGroupFormData>({
+    resolver: zodResolver(CreateGroupSchema),
+    defaultValues: {
+      visibility: 'Public',
+    },
+  })
+
+  const onSubmit = (data: CreateGroupFormData) => {
+    console.log(data)
+    toast({ title: 'Group created successfully!', variant: 'success' })
+    setIsOpen(false)
+    reset()
+  }
+
+  const handleVisibilityChange = (value: 'Public' | 'Private') => {
+    setVisibility(value)
+    setValue('visibility', value, { shouldValidate: true })
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        {triggerText ? (
+          <div className="flex cursor-pointer">
+            <p className="text-brand ">Create a new one</p>
+            <p>?</p>
+          </div>
+        ) : (
+          <Button icon={<PlusCircle />} iconPosition="left">
+            Create Group
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[480px]">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-semibold">Create a new group</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="space-y-2">
+            <Label className="text-sm font-medium" htmlFor="groupName">
+              Group name:
+            </Label>
+            <Input id="groupName" placeholder="Group name" {...register('groupName')} />
+            {errors.groupName && <p className="text-red-500 text-sm">{errors.groupName.message}</p>}
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-medium" htmlFor="members">
+              Assign member(s) to the group:
+            </Label>
+            <Input id="members" placeholder="Enter members..." {...register('members')} />
+            {errors.members && <p className="text-red-500 text-sm">{errors.members.message}</p>}
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-medium" htmlFor="description">
+              Description:
+            </Label>
+            <Textarea id="description" placeholder="Add a description" {...register('description')} />
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-medium" htmlFor="tags">
+              Tags:
+            </Label>
+            <Input id="tags" placeholder="Choose existing or add tag..." {...register('tags')} />
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Visibility:</Label>
+            <Select value={visibility} onValueChange={handleVisibilityChange}>
+              <SelectTrigger>{visibility}</SelectTrigger>
+              <SelectContent>
+                <SelectItem value="Public">Public</SelectItem>
+                <SelectItem value="Private">Private</SelectItem>
+              </SelectContent>
+            </Select>
+            {errors.visibility && <p className="text-red-500 text-sm">{errors.visibility.message}</p>}
+          </div>
+          <DialogFooter>
+            <Button className="w-full mt-4" type="submit">
+              Create Group
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default CreateGroupDialog

apps/console/src/app/(protected)/groups/my-groups/page.tsx

@@ -1,8 +1,16 @@
 import React from 'react'
 import { PageHeading } from '@repo/ui/page-heading'
+import MyGroupsTable from '@/components/pages/protected/groups/my-groups/my-groups-table'
+import CreateGroupDialog from './create-group-dialog'
 
 const Page: React.FC = () => {
-  return <PageHeading eyebrow="Groups" heading="My Groups" />
+  return (
+    <>
+      <PageHeading heading="My Groups" />
+      <CreateGroupDialog />
+      <MyGroupsTable />
+    </>
+  )
 }
 
 export default Page

apps/console/src/components/pages/protected/groups/my-groups/my-groups-table-styles.tsx

@@ -0,0 +1,14 @@
+import { tv, type VariantProps } from 'tailwind-variants'
+
+const myGroupsTableStyles = tv({
+  slots: {
+    tableRow: 'h-64 text-center',
+    keyIcon: 'text-accent-primary cursor-pointer text-4xl',
+    message: ' text-sm mt-3',
+    createLink: 'text-accent-primary text-sm font-medium mt-2 underline cursor-pointer',
+  },
+})
+
+export type myGroupsTableStyles = VariantProps<typeof myGroupsTableStyles>
+
+export { myGroupsTableStyles }

apps/console/src/components/pages/protected/groups/my-groups/my-groups-table.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/avatar'
+import { Badge } from '@repo/ui/badge'
+import { Button } from '@repo/ui/button'
+import { DataTable } from '@repo/ui/data-table'
+// import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@repo/ui/sheet'
+import { ColumnDef } from '@tanstack/table-core'
+import { GlobeIcon, LockIcon, Users2Icon } from 'lucide-react'
+import React, { useState } from 'react'
+import { TableCell, TableRow } from '../../../../../../../../packages/ui/src/table/table'
+import { myGroupsTableStyles } from './my-groups-table-styles'
+import CreateGroupDialog from '@/app/(protected)/groups/my-groups/create-group-dialog'
+
+// Sample data
+const data = [
+  {
+    name: 'CC1.2',
+    ref: 'CC1.2',
+    description: 'The board of directors demonstrates independence from management and exercises oversight of the development and performance of internal control. (COSO Principle 2)',
+    tags: ['Security', 'CC1.2', 'Control Environment'],
+    visibility: 'Public',
+    updatedBy: 'Sarah Funkhouser',
+    updatedAt: 'less than a day',
+    createdBy: 'Kelsey Waters',
+    createdAt: 'January 7, 2024 1:22 PM',
+    members: [{ avatar: '/path/to/avatar1.png', fallback: 'K' }],
+  },
+  {
+    name: 'CC1.3',
+    ref: 'CC1.3',
+    description: 'Management establishes, with board oversight, structures, reporting lines, and appropriate authorities and responsibilities. (COSO Principle 3)',
+    tags: ['Governance', 'CC1.3'],
+    visibility: 'Private',
+    updatedBy: 'John Doe',
+    updatedAt: '2 days ago',
+    createdBy: 'Kelsey Waters',
+    createdAt: 'January 5, 2024 10:15 AM',
+    members: [{ avatar: '/path/to/avatar2.png', fallback: 'S' }],
+  },
+]
+
+// Columns definition
+const columns: ColumnDef<any>[] = [
+  {
+    header: 'Name',
+    accessorKey: 'name',
+    cell: ({ row }) => <div>{row.getValue('name')}</div>,
+  },
+  {
+    header: 'Description',
+    accessorKey: 'description',
+    cell: ({ row }) => (
+      <div>
+        <p>{row.getValue('description')}</p>
+        <div className="mt-2 border-t border-dashed pt-2 flex flex-wrap gap-2">
+          {row.original.tags.map((tag: string, index: number) => (
+            <Badge key={index} variant="outline">
+              {tag}
+            </Badge>
+          ))}
+        </div>
+      </div>
+    ),
+  },
+  {
+    header: 'Visibility',
+    accessorKey: 'visibility',
+    cell: ({ row }) => {
+      const value = row.getValue('visibility')
+      return (
+        <span className="flex items-center gap-2">
+          {value === 'Public' ? <GlobeIcon height={18} /> : <LockIcon height={18} />}
+          {}value
+        </span>
+      )
+    },
+  },
+  {
+    header: 'Members',
+    accessorKey: 'members',
+    cell: ({ row }) => (
+      <div className="flex items-center gap-2">
+        {row.getValue('members').map((owner: any, index: number) => (
+          <Avatar key={index}>
+            <AvatarImage src={owner.avatar} alt={owner.fallback} />
+            <AvatarFallback>{owner.fallback}</AvatarFallback>
+          </Avatar>
+        ))}
+      </div>
+    ),
+  },
+]
+
+const MyGroupsTable: React.FC = () => {
+  const { tableRow, keyIcon, message } = myGroupsTableStyles()
+
+  const [isSheetOpen, setSheetOpen] = useState(false)
+  const [currentRow, setCurrentRow] = useState<any>(null)
+
+  const handleRowClick = (row: any) => {
+    setCurrentRow(row)
+    setSheetOpen(true)
+  }
+
+  return (
+    <DataTable
+      columns={columns}
+      data={data}
+      onRowClick={(row: any) => handleRowClick(row)}
+      noDataMarkup={
+        <TableRow className={tableRow()}>
+          <TableCell colSpan={columns.length}>
+            <div className="flex flex-col justify-center items-center">
+              <Users2Icon height={89} width={89} className={keyIcon()} strokeWidth={1} color="#DAE3E7" />
+              <p className={message()}> You're not part of any group.</p>
+              <CreateGroupDialog triggerText />
+            </div>
+          </TableCell>
+        </TableRow>
+      }
+    />
+  )
+}
+
+export default MyGroupsTable

apps/console/src/components/shared/avatar-list/avatar-list.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/avatar'
+
+const dummyData = [
+  { id: 1, src: 'https://via.placeholder.com/40', fallback: 'S' },
+  { id: 2, src: '', fallback: 'A' },
+  { id: 3, src: '', fallback: 'A' },
+  { id: 4, src: '', fallback: 'R' },
+  { id: 5, src: '', fallback: 'R' },
+  { id: 6, src: '', fallback: 'R' },
+  { id: 7, src: '', fallback: 'A' },
+]
+
+const AvatarList = () => {
+  return (
+    <div className="flex">
+      {dummyData.map(({ id, src, fallback }, index) => (
+        <Avatar key={id} className={`w-10 h-10 border border-white ${index !== 0 ? '-ml-2' : ''}`}>
+          {src ? <AvatarImage src={src} alt={`Avatar ${id}`} /> : <AvatarFallback>{fallback}</AvatarFallback>}
+        </Avatar>
+      ))}
+    </div>
+  )
+}
+
+export default AvatarList

packages/ui/src/avatar/avatar.styles.tsx

@@ -2,7 +2,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 
 export const avatarStyles = tv({
   slots: {
-    avatarImageWrap: 'relative flex h-8 w-8 shrink-0 overflow-hidden border-none rounded-full p-0',
+    avatarImageWrap: 'relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full p-0',
     avatarImage: 'aspect-square h-full w-full',
     avatarFallBack: 'uppercase flex h-full w-full items-center justify-center bg-button text-button-text rounded-md',
   },