feat: project card more info (#28)

<img width="1904" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/5669963/8a2ed136-fab5-4a44-9fb9-0ffad32cbc15">

app/project/layout.tsx

@@ -1,12 +1,20 @@
 import ProjectListSideBar from '@/components/project-sidebar/ProjectListSideBar';
 import { Suspense } from 'react';
 import Loading from '@/components/ui/Loading';
+import { authEmail } from '@/auth';
+import { redirect } from 'next/navigation';
 
 interface ChatLayoutProps {
   children: React.ReactNode;
 }
 
 export default async function Layout({ children }: ChatLayoutProps) {
+  const { isAdmin } = await authEmail();
+
+  if (!isAdmin) {
+    redirect('/');
+  }
+
   return (
     <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
       <div

components/project-sidebar/ProjectCard.tsx

@@ -11,14 +11,25 @@ export interface ProjectCardProps {
   projectInfo: ProjectBaseInfo;
 }
 
+export enum LabelType {
+  BoundingBox = 'bounding_box',
+  Segmentation = 'segmentation',
+  Classification = 'classification',
+  AnomalyDetection = 'anomaly_detection',
+  SegmentationInstantLearning = 'segmentation_instant_learning',
+}
+
+const LabelTypeDisplayText: { [key: string]: string } = {
+  [LabelType.BoundingBox]: 'detection',
+  [LabelType.Segmentation]: 'segmentation',
+  [LabelType.Classification]: 'classification',
+  [LabelType.AnomalyDetection]: 'anomaly',
+  [LabelType.SegmentationInstantLearning]: 'vp',
+};
+
 const ProjectCard: React.FC<ProjectCardProps> = ({ projectInfo }) => {
-  const {
-    id,
-    name,
-    created_at,
-    label_type,
-    organization: { name: orgName },
-  } = projectInfo;
+  const { id, name, created_at, label_type, orgName, subscription } =
+    projectInfo;
 
   const { projectId: projectIdFromParam } = useParams();
 
@@ -31,10 +42,20 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ projectInfo }) => {
       )}
       href={`/project/${id}`}
     >
-      <div className="overflow-hidden">
-        <p className="text-xs text-gray-500">{orgName}</p>
-        <p className="text-sm font-medium text-gray mb-1">{name}</p>
-        <p className="text-xs text-gray-500">{formattedDate}</p>
+      <div className="overflow-hidden w-full">
+        <div className="flex items-center justify-between w-full">
+          <p className="text-xs text-gray-500 truncate mr-2 truncate">
+            {orgName}
+          </p>
+          <p className="text-xs text-gray-500 italic">{subscription}</p>
+        </div>
+        <div className="flex mb-1 items-center">
+          <p className="text-sm font-medium text-gray mr-2 truncate">{name}</p>
+          <Chip value={LabelTypeDisplayText[label_type]} />
+        </div>
+        <div className="flex items-center truncate">
+          <p className="text-xs text-gray-500">{formattedDate}</p>
+        </div>
       </div>
     </Link>
   );

components/ui/Chip.tsx

@@ -3,20 +3,18 @@ import { cn } from '@/lib/utils';
 export interface ChipProps {
   label?: string;
   value: string;
-  color?: 'gray' | 'blue';
+  color?: 'gray' | 'blue' | 'yellow' | 'purple';
   className?: string;
 }
 
-const Chip: React.FC<ChipProps> = ({
-  label,
-  value,
-  color = 'gray',
-  className,
-}) => {
+const Chip: React.FC<ChipProps> = ({ label, value, className, color }) => {
   return (
     <div
       className={cn(
-        `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${color}-100 text-${color}-800 mr-1`,
+        `inline-flex items-center px-1.5 rounded-full text-xs bg-gray-100 text-gray-500 mr-2`,
+        color === 'blue' && 'bg-blue-100 text-blue-500',
+        color === 'yellow' && 'bg-yellow-100 text-yellow-500',
+        color === 'purple' && 'bg-purple-100 text-purple-500',
         className,
       )}
     >

lib/fetch/index.ts

@@ -83,10 +83,9 @@ export type ProjectBaseInfo = {
   name: string;
   created_at: Date;
   label_type: string;
-  organization: {
-    id: number;
-    name: string;
-  };
+  orgName: string;
+  orgId: number;
+  subscription: string;
 };
 /**
  * Fetch recent projects from all organizations from past 30 days, excluding

lib/hooks/useVisionAgent.tsx

@@ -82,13 +82,22 @@ const useVisionAgent = (chat: ChatEntity) => {
           ...message,
           content: logs + CLEANED_SEPARATOR + newContent,
         };
-        /**
-         * A workaround to fix the issue of the message not being appended to the chat
-         * https://github.com/vercel/ai/issues/550#issuecomment-1712693371
-         */
         setMessages([
           ...messages,
-          { id: nanoid(), role: 'user', content: input, createdAt: new Date() },
+          /**
+           * A workaround to fix the issue of the messages been stale state when appending a new message
+           * https://github.com/vercel/ai/issues/550#issuecomment-1712693371
+           */
+          ...(input
+            ? [
+                {
+                  id: nanoid(),
+                  role: 'user',
+                  content: input,
+                  createdAt: new Date(),
+                } satisfies Message,
+              ]
+            : []),
           newMessage,
         ]);
         if (id) {