@geniusdynamics/ns8-ui-lib 1.0.3 → 1.0.5

package/src/components/NS/cards/NSBackupCard.vue

@@ -129,49 +129,51 @@ const tableClasses = computed(() => {
 
 <template>
   <Card :class="cardClasses">
-    <CardHeader class="pb-3">
-      <CardTitle class="flex items-center gap-2">
-        <Save class="h-5 w-5 text-primary" />
+    <CardHeader class="tw:pb-3">
+      <CardTitle class="tw:flex tw:items-center tw:gap-2">
+        <Save class="tw:h-5 tw:w-5 tw:text-primary" />
         {{ title }}
       </CardTitle>
     </CardHeader>
 
-    <CardContent class="space-y-4">
+    <CardContent class="tw:space-y-4">
       <!-- Loading state -->
-      <div v-if="loading" class="space-y-2">
-        <Skeleton class="h-4 w-3/4" />
-        <Skeleton class="h-4 w-1/2" />
+      <div v-if="loading" class="tw:space-y-2">
+        <Skeleton class="tw:h-4 tw:w-3/4" />
+        <Skeleton class="tw:h-4 tw:w-1/2" />
       </div>
 
       <!-- No backups state -->
       <div
         v-else-if="!hasBackups"
-        class="flex items-center gap-3 text-muted-foreground"
+        class="tw:flex tw:items-center tw:gap-3 tw:text-muted-foreground"
       >
-        <AlertCircle class="h-5 w-5" />
+        <AlertCircle class="tw:h-5 tw:w-5" />
         <span>{{ noBackupMessage }}</span>
       </div>
 
       <!-- Single backup state -->
-      <div v-else-if="singleBackup" class="space-y-4">
+      <div v-else-if="singleBackup" class="tw:space-y-4">
         <div :class="tableWrapperClasses">
           <div :class="tableClasses">
             <!-- Status row -->
-            <div class="flex items-center justify-between py-2 border-b">
-              <span class="text-sm font-medium">{{ statusLabel }}</span>
-              <div class="flex items-center gap-2">
-                <span v-if="!singleBackup.enabled" class="text-destructive">
+            <div
+              class="tw:flex tw:items-center tw:justify-between tw:py-2 tw:border-b"
+            >
+              <span class="tw:text-sm tw:font-medium">{{ statusLabel }}</span>
+              <div class="tw:flex tw:items-center tw:gap-2">
+                <span v-if="!singleBackup.enabled" class="tw:text-destructive">
                   {{ backupDisabledLabel }}
                 </span>
                 <span
                   v-else-if="status[singleBackup.id]?.success"
-                  class="text-green-600"
+                  class="tw:text-green-600"
                 >
                   {{ statusSuccessLabel }}
                 </span>
                 <span
                   v-else-if="status[singleBackup.id]?.message"
-                  class="text-destructive"
+                  class="tw:text-destructive"
                 >
                   {{ status[singleBackup.id].message }}
                 </span>
@@ -179,25 +181,27 @@ const tableClasses = computed(() => {
             </div>
 
             <!-- Backup details -->
-            <div class="space-y-2 py-2">
-              <div class="flex justify-between">
-                <span class="text-sm text-muted-foreground">Name:</span>
-                <span class="text-sm font-medium">{{ singleBackup.name }}</span>
+            <div class="tw:space-y-2 tw:py-2">
+              <div class="tw:flex tw:justify-between">
+                <span class="tw:text-sm tw:text-muted-foreground">Name:</span>
+                <span class="tw:text-sm tw:font-medium">{{
+                  singleBackup.name
+                }}</span>
               </div>
-              <div class="flex justify-between">
-                <span class="text-sm text-muted-foreground">Date:</span>
-                <span class="text-sm">{{ singleBackup.date }}</span>
+              <div class="tw:flex tw:justify-between">
+                <span class="tw:text-sm tw:text-muted-foreground">Date:</span>
+                <span class="tw:text-sm">{{ singleBackup.date }}</span>
               </div>
-              <div class="flex justify-between">
-                <span class="text-sm text-muted-foreground">Size:</span>
-                <span class="text-sm">{{ singleBackup.size }}</span>
+              <div class="tw:flex tw:justify-between">
+                <span class="tw:text-sm tw:text-muted-foreground">Size:</span>
+                <span class="tw:text-sm">{{ singleBackup.size }}</span>
               </div>
             </div>
           </div>
         </div>
 
         <!-- Action buttons -->
-        <div class="flex gap-2 pt-2">
+        <div class="tw:flex tw:gap-2 tw:pt-2">
           <Button
             v-if="singleBackup.enabled"
             variant="outline"
@@ -229,21 +233,35 @@ const tableClasses = computed(() => {
         <div :class="tableWrapperClasses">
           <table :class="tableClasses">
             <thead>
-              <tr class="border-b">
-                <th class="text-left p-2 text-sm font-medium">Name</th>
-                <th class="text-left p-2 text-sm font-medium">Date</th>
-                <th class="text-left p-2 text-sm font-medium">Size</th>
-                <th class="text-left p-2 text-sm font-medium">Status</th>
-                <th class="text-right p-2 text-sm font-medium">Actions</th>
+              <tr class="tw:border-b">
+                <th class="tw:text-left tw:p-2 tw:text-sm tw:font-medium">
+                  Name
+                </th>
+                <th class="tw:text-left tw:p-2 tw:text-sm tw:font-medium">
+                  Date
+                </th>
+                <th class="tw:text-left tw:p-2 tw:text-sm tw:font-medium">
+                  Size
+                </th>
+                <th class="tw:text-left tw:p-2 tw:text-sm tw:font-medium">
+                  Status
+                </th>
+                <th class="tw:text-right tw:p-2 tw:text-sm tw:font-medium">
+                  Actions
+                </th>
               </tr>
             </thead>
             <tbody>
-              <tr v-for="backup in backups" :key="backup.id" class="border-b">
-                <td class="p-2 text-sm">{{ backup.name }}</td>
-                <td class="p-2 text-sm">{{ backup.date }}</td>
-                <td class="p-2 text-sm">{{ backup.size }}</td>
-                <td class="p-2 text-sm">
-                  <div class="flex items-center gap-2">
+              <tr
+                v-for="backup in backups"
+                :key="backup.id"
+                class="tw:border-b"
+              >
+                <td class="tw:p-2 tw:text-sm">{{ backup.name }}</td>
+                <td class="tw:p-2 tw:text-sm">{{ backup.date }}</td>
+                <td class="tw:p-2 tw:text-sm">{{ backup.size }}</td>
+                <td class="tw:p-2 tw:text-sm">
+                  <div class="tw:flex tw:items-center tw:gap-2">
                     <component
                       v-if="getStatusIcon(backup)"
                       :is="getStatusIcon(backup)"
@@ -254,8 +272,8 @@ const tableClasses = computed(() => {
                     </span>
                   </div>
                 </td>
-                <td class="p-2 text-sm">
-                  <div class="flex items-center justify-end gap-1">
+                <td class="tw:p-2 tw:text-sm">
+                  <div class="tw:flex tw:items-center tw:justify-end tw:gap-1">
                     <Button
                       variant="ghost"
                       size="sm"

package/src/components/NS/cards/NSSystemInfoCard.vue

@@ -1,56 +1,68 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { HardDrive, Activity, CheckCircle, AlertCircle, Clock } from 'lucide-vue-next'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Progress } from '@/components/ui/progress'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
+import { computed } from "vue";
+import {
+  HardDrive,
+  Activity,
+  CheckCircle,
+  AlertCircle,
+  Clock,
+} from "lucide-vue-next";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 interface SystemMetrics {
-  totalSpace: string
-  usedSpace: string
-  freeSpace: string
-  usagePercentage: number
-  temperature?: string
-  loadAverage?: string[]
-  uptime?: string
-  processes?: number
+  totalSpace: string;
+  usedSpace: string;
+  freeSpace: string;
+  usagePercentage: number;
+  temperature?: string;
+  loadAverage?: string[];
+  uptime?: string;
+  processes?: number;
   memory?: {
-    total: string
-    used: string
-    free: string
-    percentage: number
-  }
+    total: string;
+    used: string;
+    free: string;
+    percentage: number;
+  };
   cpu?: {
-    cores: number
-    usage: number
-    frequency: string
-  }
+    cores: number;
+    usage: number;
+    frequency: string;
+  };
 }
 
 interface Props {
-  title?: string
-  description?: string
-  metrics?: SystemMetrics
-  loading?: boolean
-  refreshInterval?: number
-  showTemperature?: boolean
-  showLoadAverage?: boolean
-  showUptime?: boolean
-  showProcesses?: boolean
-  showMemory?: boolean
-  showCpu?: boolean
-  showStorage?: boolean
-  refreshable?: boolean
-  light?: boolean
-  maxHeight?: string
-  class?: string
+  title?: string;
+  description?: string;
+  metrics?: SystemMetrics;
+  loading?: boolean;
+  refreshInterval?: number;
+  showTemperature?: boolean;
+  showLoadAverage?: boolean;
+  showUptime?: boolean;
+  showProcesses?: boolean;
+  showMemory?: boolean;
+  showCpu?: boolean;
+  showStorage?: boolean;
+  refreshable?: boolean;
+  light?: boolean;
+  maxHeight?: string;
+  class?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  title: 'System Information',
-  description: 'Current system status and metrics',
+  title: "System Information",
+  description: "Current system status and metrics",
   loading: false,
   showTemperature: false,
   showLoadAverage: true,
@@ -61,83 +73,85 @@ const props = withDefaults(defineProps<Props>(), {
   showStorage: true,
   refreshable: true,
   light: false,
-})
+});
 
 const emit = defineEmits<{
-  refresh: []
-}>()
+  refresh: [];
+}>();
 
-const hasMetrics = computed(() => !!props.metrics)
+const hasMetrics = computed(() => !!props.metrics);
 
 const storageVariant = computed(() => {
-  if (!props.metrics?.usagePercentage) return 'default'
-  
-  const percentage = props.metrics.usagePercentage
-  if (percentage >= 90) return 'destructive'
-  if (percentage >= 80) return 'warning'
-  if (percentage >= 60) return 'default'
-  return 'success'
-})
+  if (!props.metrics?.usagePercentage) return "default";
+
+  const percentage = props.metrics.usagePercentage;
+  if (percentage >= 90) return "destructive";
+  if (percentage >= 80) return "warning";
+  if (percentage >= 60) return "default";
+  return "success";
+});
 
 const memoryVariant = computed(() => {
-  if (!props.metrics?.memory?.percentage) return 'default'
-  
-  const percentage = props.metrics.memory.percentage
-  if (percentage >= 90) return 'destructive'
-  if (percentage >= 80) return 'warning'
-  if (percentage >= 60) return 'default'
-  return 'success'
-})
+  if (!props.metrics?.memory?.percentage) return "default";
+
+  const percentage = props.metrics.memory.percentage;
+  if (percentage >= 90) return "destructive";
+  if (percentage >= 80) return "warning";
+  if (percentage >= 60) return "default";
+  return "success";
+});
 
 const cpuVariant = computed(() => {
-  if (!props.metrics?.cpu?.usage) return 'default'
-  
-  const usage = props.metrics.cpu.usage
-  if (usage >= 90) return 'destructive'
-  if (usage >= 80) return 'warning'
-  if (usage >= 60) return 'default'
-  return 'success'
-})
+  if (!props.metrics?.cpu?.usage) return "default";
+
+  const usage = props.metrics.cpu.usage;
+  if (usage >= 90) return "destructive";
+  if (usage >= 80) return "warning";
+  if (usage >= 60) return "default";
+  return "success";
+});
 
 const containerClasses = computed(() => {
-  return cn('w-full', props.class)
-})
+  return cn("w-full", props.class);
+});
 
 const cardClasses = computed(() => {
   return cn(
-    'transition-all duration-200 hover:shadow-md',
-    props.light ? 'bg-background/95' : 'bg-background'
-  )
-})
+    "transition-all duration-200 hover:shadow-md",
+    props.light ? "bg-background/95" : "bg-background",
+  );
+});
 
 const metricsGridClasses = computed(() => {
-  return cn('grid gap-4', {
-    'grid-cols-1': !props.showMemory && !props.showCpu && !props.showStorage,
-    'grid-cols-2': (props.showMemory && !props.showCpu && !props.showStorage) ||
-                       (!props.showMemory && props.showCpu && !props.showStorage) ||
-                       (!props.showMemory && !props.showCpu && props.showStorage),
-    'grid-cols-3': (props.showMemory && props.showCpu && !props.showStorage) ||
-                       (props.showMemory && !props.showCpu && props.showStorage) ||
-                       (!props.showMemory && props.showCpu && props.showStorage),
-    'lg:grid-cols-4': props.showMemory && props.showCpu && props.showStorage
-  })
-})
+  return cn("grid gap-4", {
+    "grid-cols-1": !props.showMemory && !props.showCpu && !props.showStorage,
+    "grid-cols-2":
+      (props.showMemory && !props.showCpu && !props.showStorage) ||
+      (!props.showMemory && props.showCpu && !props.showStorage) ||
+      (!props.showMemory && !props.showCpu && props.showStorage),
+    "grid-cols-3":
+      (props.showMemory && props.showCpu && !props.showStorage) ||
+      (props.showMemory && !props.showCpu && props.showStorage) ||
+      (!props.showMemory && props.showCpu && props.showStorage),
+    "lg:grid-cols-4": props.showMemory && props.showCpu && props.showStorage,
+  });
+});
 </script>
 
 <template>
   <Card :class="cardClasses">
-    <CardHeader class="pb-3">
-      <div class="flex items-center justify-between">
+    <CardHeader class="tw:pb-3">
+      <div class="tw:flex tw:items-center tw:justify-between">
         <div>
-          <CardTitle class="flex items-center gap-2">
-            <Activity class="h-5 w-5 text-primary" />
+          <CardTitle class="tw:flex tw:items-center tw:gap-2">
+            <Activity class="tw:h-5 tw:w-5 tw:text-primary" />
             {{ title }}
           </CardTitle>
           <CardDescription>
             {{ description }}
           </CardDescription>
         </div>
-        
+
         <!-- Refresh button -->
         <Button
           v-if="refreshable && !loading"
@@ -145,108 +159,127 @@ const metricsGridClasses = computed(() => {
           size="sm"
           @click="emit('refresh')"
         >
-          <Clock class="h-4 w-4" />
+          <Clock class="tw:h-4 tw:w-4" />
         </Button>
       </div>
     </CardHeader>
 
-    <CardContent class="space-y-4">
+    <CardContent class="tw:space-y-4">
       <!-- Loading state -->
-      <div v-if="loading" class="space-y-3">
-        <div class="space-y-2">
-          <div class="h-2 bg-secondary rounded-full" />
-          <div class="h-2 bg-secondary rounded-full" />
-          <div class="h-2 bg-secondary rounded-full" />
+      <div v-if="loading" class="tw:space-y-3">
+        <div class="tw:space-y-2">
+          <div class="tw:h-2 tw:bg-secondary tw:rounded-full" />
+          <div class="tw:h-2 tw:bg-secondary tw:rounded-full" />
+          <div class="tw:h-2 tw:bg-secondary tw:rounded-full" />
         </div>
       </div>
 
       <!-- System metrics -->
       <div v-else-if="hasMetrics" :class="metricsGridClasses">
         <!-- Storage metrics -->
-        <div v-if="showStorage" class="space-y-2">
-          <div class="flex items-center gap-2 text-sm font-medium">
-            <HardDrive class="h-4 w-4" />
+        <div v-if="showStorage" class="tw:space-y-2">
+          <div
+            class="tw:flex tw:items-center tw:gap-2 tw:text-sm tw:font-medium"
+          >
+            <HardDrive class="tw:h-4 tw:w-4" />
             Storage
           </div>
-          <Progress 
-            :value="metrics.usagePercentage" 
+          <Progress
+            :value="metrics.usagePercentage"
             :variant="storageVariant"
-            class="mb-2"
+            class="tw:mb-2"
           />
-          <div class="text-xs text-muted-foreground space-y-1">
+          <div class="tw:text-xs tw:text-muted-foreground tw:space-y-1">
             <div>Used: {{ metrics.usedSpace }} / {{ metrics.totalSpace }}</div>
             <div>Free: {{ metrics.freeSpace }}</div>
           </div>
         </div>
 
         <!-- Memory metrics -->
-        <div v-if="showMemory && metrics?.memory" class="space-y-2">
-          <div class="flex items-center gap-2 text-sm font-medium">
-            <Activity class="h-4 w-4" />
+        <div v-if="showMemory && metrics?.memory" class="tw:space-y-2">
+          <div
+            class="tw:flex tw:items-center tw:gap-2 tw:text-sm tw:font-medium"
+          >
+            <Activity class="tw:h-4 tw:w-4" />
             Memory
           </div>
-          <Progress 
-            :value="metrics.memory.percentage" 
+          <Progress
+            :value="metrics.memory.percentage"
             :variant="memoryVariant"
-            class="mb-2"
+            class="tw:mb-2"
           />
-          <div class="text-xs text-muted-foreground space-y-1">
-            <div>Used: {{ metrics.memory.used }} / {{ metrics.memory.total }}</div>
+          <div class="tw:text-xs tw:text-muted-foreground tw:space-y-1">
+            <div>
+              Used: {{ metrics.memory.used }} / {{ metrics.memory.total }}
+            </div>
             <div>Free: {{ metrics.memory.free }}</div>
           </div>
         </div>
 
         <!-- CPU metrics -->
-        <div v-if="showCpu && metrics?.cpu" class="space-y-2">
-          <div class="flex items-center gap-2 text-sm font-medium">
-            <Activity class="h-4 w-4" />
+        <div v-if="showCpu && metrics?.cpu" class="tw:space-y-2">
+          <div
+            class="tw:flex tw:items-center tw:gap-2 tw:text-sm tw:font-medium"
+          >
+            <Activity class="tw:h-4 tw:w-4" />
             CPU
           </div>
-          <Progress 
-            :value="metrics.cpu.usage" 
+          <Progress
+            :value="metrics.cpu.usage"
             :variant="cpuVariant"
-            class="mb-2"
+            class="tw:mb-2"
           />
-          <div class="text-xs text-muted-foreground space-y-1">
+          <div class="tw:text-xs tw:text-muted-foreground tw:space-y-1">
             <div>Usage: {{ metrics.cpu.usage }}%</div>
             <div>Cores: {{ metrics.cpu.cores }}</div>
-            <div v-if="metrics.cpu.frequency">Frequency: {{ metrics.cpu.frequency }}</div>
+            <div v-if="metrics.cpu.frequency">
+              Frequency: {{ metrics.cpu.frequency }}
+            </div>
           </div>
         </div>
       </div>
 
       <!-- Additional system info -->
-      <div v-if="hasMetrics" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 pt-4 border-t">
+      <div
+        v-if="hasMetrics"
+        class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 lg:tw:grid-cols-4 tw:gap-3 tw:pt-4 tw:border-t"
+      >
         <!-- Temperature -->
         <div v-if="showTemperature && metrics?.temperature">
-          <div class="text-xs text-muted-foreground">Temperature</div>
-          <div class="text-sm font-medium">{{ metrics.temperature }}</div>
+          <div class="tw:text-xs tw:text-muted-foreground">Temperature</div>
+          <div class="tw:text-sm tw:font-medium">{{ metrics.temperature }}</div>
         </div>
 
         <!-- Load average -->
         <div v-if="showLoadAverage && metrics?.loadAverage">
-          <div class="text-xs text-muted-foreground">Load Average</div>
-          <div class="text-sm font-medium">{{ metrics.loadAverage.join(', ') }}</div>
+          <div class="tw:text-xs tw:text-muted-foreground">Load Average</div>
+          <div class="tw:text-sm tw:font-medium">
+            {{ metrics.loadAverage.join(", ") }}
+          </div>
         </div>
 
         <!-- Uptime -->
         <div v-if="showUptime && metrics?.uptime">
-          <div class="text-xs text-muted-foreground">Uptime</div>
-          <div class="text-sm font-medium">{{ metrics.uptime }}</div>
+          <div class="tw:text-xs tw:text-muted-foreground">Uptime</div>
+          <div class="tw:text-sm tw:font-medium">{{ metrics.uptime }}</div>
         </div>
 
         <!-- Processes -->
         <div v-if="showProcesses && metrics?.processes">
-          <div class="text-xs text-muted-foreground">Processes</div>
-          <div class="text-sm font-medium">{{ metrics.processes }}</div>
+          <div class="tw:text-xs tw:text-muted-foreground">Processes</div>
+          <div class="tw:text-sm tw:font-medium">{{ metrics.processes }}</div>
         </div>
       </div>
 
       <!-- No data state -->
-      <div v-if="!hasMetrics && !loading" class="flex items-center gap-3 text-muted-foreground">
-        <AlertCircle class="h-5 w-5" />
+      <div
+        v-if="!hasMetrics && !loading"
+        class="tw:flex tw:items-center tw:gap-3 tw:text-muted-foreground"
+      >
+        <AlertCircle class="tw:h-5 tw:w-5" />
         <span>No system metrics available</span>
       </div>
     </CardContent>
   </Card>
-</template>
+</template>
+