Enhance UI

.github/ISSUE_TEMPLATE/bug_report.md

@@ -2,7 +2,7 @@
 name: Bug report
 about: Create a report to help us improve
 title: ''
-labels: ''
+labels: bug
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,7 +2,7 @@
 name: Feature request
 about: Suggest an idea for this project
 title: ''
-labels: ''
+labels: enhancement
 assignees: ''
 
 ---

view/app/containers/[id]/components/ContainerDetailsLoading.tsx

@@ -14,7 +14,7 @@ function ContainerDetailsLoading() {
         <TabsList>
           <TabsTrigger value="overview">Overview</TabsTrigger>
           <TabsTrigger value="logs">Logs</TabsTrigger>
-          <TabsTrigger value="details">Details</TabsTrigger>
+
         </TabsList>
         <TabsContent value="overview">
           <Card>
@@ -62,34 +62,7 @@ function ContainerDetailsLoading() {
             </CardContent>
           </Card>
         </TabsContent>
-        <TabsContent value="details">
-          <Card>
-            <CardContent className="pt-6">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div className="space-y-4">
-                  <div className="space-y-2">
-                    <Skeleton className="h-4 w-32" />
-                    <Skeleton className="h-6 w-48" />
-                  </div>
-                  <div className="space-y-2">
-                    <Skeleton className="h-4 w-32" />
-                    <Skeleton className="h-6 w-48" />
-                  </div>
-                </div>
-                <div className="space-y-4">
-                  <div className="space-y-2">
-                    <Skeleton className="h-4 w-32" />
-                    <Skeleton className="h-6 w-48" />
-                  </div>
-                  <div className="space-y-2">
-                    <Skeleton className="h-4 w-32" />
-                    <Skeleton className="h-6 w-48" />
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
+
       </Tabs>
     </div>
   );

view/app/containers/[id]/components/ContainerMetadataCard.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Info } from 'lucide-react';
+import { Container } from '@/redux/services/container/containerApi';
+import { useTranslation } from '@/hooks/use-translation';
+
+interface ContainerMetadataCardProps {
+  container: Container;
+}
+
+export function ContainerMetadataCard({ container }: ContainerMetadataCardProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card className="w-full rounded-lg shadow-md border border-gray-200">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <Info className="h-5 w-5" />
+          {t('containers.metadata.title')}
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {/* Container ID */}
+        <div className="flex justify-between items-center">
+          <span className="text-sm text-muted-foreground font-medium">
+            {t('containers.metadata.id')}
+          </span>
+          <span className="text-sm font-mono truncate">{container.id}</span>
+        </div>
+
+        {/* Image */}
+        <div className="flex justify-between items-center">
+          <span className="text-sm text-muted-foreground font-medium">
+            {t('containers.metadata.image')}
+          </span>
+          <span className="text-sm font-mono truncate">{container.image}</span>
+        </div>
+
+        {/* Mounts */}
+        {container?.mounts?.length > 0 && (
+          <div className="col-span-1 sm:col-span-2">
+            <span className="text-sm text-muted-foreground font-medium">
+              {t('containers.metadata.mounts')}
+            </span>
+            <ul className="list-disc ml-4 mt-1 text-sm font-mono">
+              {container.mounts.map((mount) => (
+               <li key={`${mount.source}-${mount.destination}`}>
+                  {mount.source} → {mount.destination}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {/* Labels */}
+        {Object.keys(container.labels ?? {}).length > 0 && (
+          <div className="col-span-1 sm:col-span-2">
+            <span className="text-sm text-muted-foreground font-medium">
+              {t('containers.metadata.labels')}
+            </span>
+            <div className="flex flex-wrap gap-2 mt-1">
+              {Object.entries(container.labels).map(([key, value]) => (
+                <Badge key={key} variant="outline">
+                  {key}: {value}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

view/app/containers/[id]/components/OverviewTab.tsx

@@ -4,6 +4,7 @@ import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import { formatDistanceToNow } from 'date-fns';
 import { Container } from '@/redux/services/container/containerApi';
 import { useTranslation } from '@/hooks/use-translation';
+import { ContainerMetadataCard } from './ContainerMetadataCard';
 
 interface OverviewTabProps {
   container: Container;
@@ -97,6 +98,11 @@ export function OverviewTab({ container }: OverviewTabProps) {
           </div>
         </CardContent>
       </Card>
+      {/* New Metadata Card */}
+        <div className="col-span-1 md:col-span-2">
+    <ContainerMetadataCard container={container} />
+  </div>
+
     </div>
   );
 }

view/app/containers/[id]/page.tsx

@@ -25,7 +25,6 @@ import { useRouter, useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { OverviewTab } from './components/OverviewTab';
 import { LogsTab } from './components/LogsTab';
-import { DetailsTab } from './components/DetailsTab';
 import { Terminal as TerminalComponent } from './components/Terminal';
 import ContainerDetailsLoading from './components/ContainerDetailsLoading';
 import { DeleteDialog } from '@/components/ui/delete-dialog';
@@ -170,7 +169,7 @@ export default function ContainerDetailsPage() {
 
           <div className="space-y-4">
             <Tabs defaultValue="overview" className="w-full">
-              <TabsList className="grid w-full grid-cols-5">
+              <TabsList className="grid w-full grid-cols-4">
                 <TabsTrigger value="overview">
                   <Info className="mr-2 h-4 w-4" />
                   {t('containers.overview')}
@@ -187,20 +186,15 @@ export default function ContainerDetailsPage() {
                   <Terminal className="mr-2 h-4 w-4" />
                   {t('containers.logs')}
                 </TabsTrigger>
-                <TabsTrigger value="details">
-                  <HardDrive className="mr-2 h-4 w-4" />
-                  {t('containers.details')}
-                </TabsTrigger>
+
               </TabsList>
               <TabsContent value="overview" className="mt-4">
                 <OverviewTab container={container} />
               </TabsContent>
               <TabsContent value="logs" className="mt-4">
                 <LogsTab container={container} logs={allLogs} onLoadMore={handleLoadMoreLogs} />
               </TabsContent>
-              <TabsContent value="details" className="mt-4">
-                <DetailsTab container={container} />
-              </TabsContent>
+
               <TabsContent value="terminal" className="mt-4">
                 {container.status === 'running' ? (
                   <TerminalComponent containerId={containerId} />

view/lib/i18n/locales/en.json

@@ -91,7 +91,14 @@
       "size": "Size",
       "containers": "Containers",
       "none": "<none>"
-    }
+    },
+    "metadata": {
+    "title": "Container Metadata",
+    "id": "Container ID",
+    "image": "Image",
+    "mounts": "Mounts",
+    "labels": "Labels"
+  }
   },
   "auth": {
     "login": {

view/redux/services/container/containerApi.ts

@@ -2,7 +2,18 @@ import { createApi } from '@reduxjs/toolkit/query/react';
 import { baseQueryWithReauth } from '@/redux/base-query';
 import { CONTAINERURLS } from '@/redux/api-conf';
 
+
+
+export interface ContainerMount {
+  source: string;
+  destination: string;
+  mode?: string;
+  rw?: boolean;
+  propagation?: string;
+}
 export interface Container {
+  labels: Record<string, string>;
+  mounts: ContainerMount[];
   id: string;
   name: string;
   image: string;