Make OverviewCard props optional and styles update (#2166)

<!--
Ensure the title clearly reflects what was changed.
Provide a clear and concise description of the changes made. The PR
should only contain the changes related to the issue, and no other
unrelated changes.
-->

Fixes OPS-3930

Author: Roman Snapko

packages/ui-components/src/components/overview-card/overview-card.tsx

@@ -5,9 +5,10 @@ type OverviewCardProps = {
   title: string;
   icon: ReactNode;
   value: string | number;
-  bottomLineText: string;
-  onClick: () => void;
+  bottomLineText?: string;
+  onClick?: () => void;
   iconWrapperClassName?: string;
+  titleClassName?: string;
   className?: string;
 };
 
@@ -18,28 +19,36 @@ const OverviewCard = ({
   bottomLineText,
   onClick,
   iconWrapperClassName,
+  titleClassName,
   className,
 }: OverviewCardProps) => (
   <div
     className={cn(
-      'w-full h-full p-[22px] flex flex-col gap-4 bg-background border rounded-2xl shadow-template cursor-pointer',
+      'w-full h-full p-[22px] flex flex-col gap-4 bg-background border rounded-2xl shadow-template',
+      { 'cursor-pointer': !!onClick },
       className,
     )}
     onClick={onClick}
   >
     <div className="flex items-center gap-[9px]">
       <div
         className={cn(
-          'size-10 flex items-center justify-center rounded-full font-bold text-base text-background bg-blue-400',
+          'size-10 shrink-0 flex items-center justify-center rounded-full font-bold text-base text-background bg-blue-400',
           iconWrapperClassName,
         )}
       >
         {icon}
       </div>
-      <span className="font-bold text-base text-foreground">{title}</span>
+      <span
+        className={cn('text-[14px] font-bold text-foreground', titleClassName)}
+      >
+        {title}
+      </span>
     </div>
     <p className="font-bold text-[32px]/[32px] text-foreground">{value}</p>
-    <p className="font-normal text-sm text-gray-400">{bottomLineText}</p>
+    {bottomLineText && (
+      <p className="font-normal text-sm text-gray-400">{bottomLineText}</p>
+    )}
   </div>
 );
 

packages/ui-components/src/stories/overview-card/overview-card.stories.tsx

@@ -31,3 +31,39 @@ type Story = StoryObj<typeof meta>;
  * The default card displaying one item.
  */
 export const Default: Story = {};
+
+/**
+ * Card without a bottom line text.
+ */
+export const WithoutBottomLineText: Story = {
+  args: {
+    bottomLineText: undefined,
+  },
+};
+
+/**
+ * Card without an onClick handler — no pointer cursor is shown.
+ */
+export const NonClickable: Story = {
+  args: {
+    onClick: undefined,
+  },
+};
+
+/**
+ * Card with a custom title class name.
+ */
+export const CustomTitleClassName: Story = {
+  args: {
+    titleClassName: 'text-blue-400',
+  },
+};
+
+/**
+ * Card with a custom icon wrapper class name.
+ */
+export const CustomIconWrapperClassName: Story = {
+  args: {
+    iconWrapperClassName: 'bg-green-400',
+  },
+};