feat: billing period for subscriptions, costs in redundancy analysis

artifacts/toolrate/src/pages/tool-detail.tsx

@@ -84,6 +84,7 @@ export default function ToolDetail() {
   const [costDialogOpen, setCostDialogOpen] = useState(false);
   const [editCost, setEditCost] = useState<any | null>(null);
   const [costLicenseType, setCostLicenseType] = useState("subscription");
+  const [costBillingPeriod, setCostBillingPeriod] = useState("monthly");
   const [costAmount, setCostAmount] = useState("");
   const [costCurrency, setCostCurrency] = useState("EUR");
   const [costRenewal, setCostRenewal] = useState("");
@@ -140,6 +141,7 @@ export default function ToolDetail() {
     const method = editCost ? "PATCH" : "POST";
     const body: Record<string, unknown> = {
       licenseType: costLicenseType,
+      billingPeriod: costLicenseType === "subscription" ? costBillingPeriod : null,
       currency: costCurrency,
       notes: costNotes || null,
     };
@@ -159,6 +161,7 @@ export default function ToolDetail() {
   function resetCostForm() {
     setEditCost(null);
     setCostLicenseType("subscription");
+    setCostBillingPeriod("monthly");
     setCostAmount("");
     setCostCurrency("EUR");
     setCostRenewal("");
@@ -168,6 +171,7 @@ export default function ToolDetail() {
   function openEditCost(c: any) {
     setEditCost(c);
     setCostLicenseType(c.licenseType);
+    setCostBillingPeriod(c.billingPeriod ?? "monthly");
     setCostAmount(c.cost ?? "");
     setCostCurrency(c.currency ?? "EUR");
     setCostRenewal(c.renewalDate ?? "");
@@ -550,7 +554,10 @@ export default function ToolDetail() {
                     <CardContent className="p-4">
                       <div className="flex justify-between items-start">
                         <div>
-                          <Badge variant="outline" className="text-xs mb-1">{c.licenseType}</Badge>
+                          <div className="flex items-center gap-1.5 mb-1">
+                            <Badge variant="outline" className="text-xs">{c.licenseType}</Badge>
+                            {c.billingPeriod && <span className="text-[10px] text-muted-foreground uppercase">{c.billingPeriod}</span>}
+                          </div>
                           <div className="text-lg font-bold">
                             {c.cost != null ? `${c.cost} ${c.currency ?? ""}` : "Free"}
                           </div>
@@ -602,6 +609,19 @@ export default function ToolDetail() {
                   </SelectContent>
                 </Select>
               </div>
+              {costLicenseType === "subscription" && (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Billing Period</label>
+                  <Select value={costBillingPeriod} onValueChange={setCostBillingPeriod}>
+                    <SelectTrigger><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="monthly">Monthly</SelectItem>
+                      <SelectItem value="quarterly">Quarterly</SelectItem>
+                      <SelectItem value="yearly">Yearly</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <label className="text-sm font-medium">Cost</label>